.

js

An overview of the
Javascript
ecosystem
 About me

12 years of software development experience, 4 of which spent as team

leader;
main programming languages are C++, C#, Typescript, and Javascript;
Ive built complex web applications using C# and Javascript/Typescript;
but I mostly care about writing correct, elegant, reusable, and
maintainable code.

global market leader for in-store music, digital signage, hold music,
on-hold messaging, scent, integrated Audio/Video, and interactive
mobile marketing solutions;
offices in over 30 countries;
reaches over 100 million people in 470,000 locations;
 globally serving customers such as Nike, AT&T, Target, McDonalds, H&M, Ecco,
Renault, Nissan
over 20 production servers, 50.000 devices running Windows Embedded or Android
over 200.000 lines of code over multiple projects and repositories
programming languages, in order of lines of code: C#, Typescript/Javascript, Java, C++
the web management application has over 30.000 lines of code, not including the 50
external dependencies (angular, bootstrap, signalR, underscore, etc)
stop me
and ask
 The bad and the ugly - basic operations

js> '4' - 2 js> '4' + - 2

js> '4' + 2 js> '4' - + 2

js> '4' + + 2 js> '4' - + - + + - - 2

 The bad and the ugly - basic operations

js> '4' - 2 js> '4' + - 2

=> 2 => '4-2'

js> '4' + 2 js> '4' - + 2

=> '42' => 2

js> '4' + + 2 js> '4' - + - + + - - 2

=> '42' => 6
 The bad and the ugly - objects

js> {} + 1 js> {} + 1 + 2

js> 1 + {} js> 1 + {} + 2

js> 1 + 2 + {}
 The bad and the ugly - objects

js> {} + 1 js> {} + 1 + 2
=> 1 => 3

js> 1 + {} js> 1 + {} + 2
=> '1[object Object]' => '1[object Object]2'

js> 1 + 2 + {}
=> '3[object Object]'
 The bad and the ugly - nulls

js> [] + null js> [] + {}

js> {} + null js> {} + []

js> null + {} js> [1] + [2] - [3]

 The bad and the ugly - nulls

js> [] + null js> [] + {}

=> 'null' => '[object Object']

js> {} + null js> {} + []

=> 0 => 0

js> null + {} js> [1] + [2] - [3]

=> 'null[object Object]' => 9
 The bad and the ugly

var array = [0]; js> Math.min() < Math.max()

js> array == array

js> array == !array

js> Math.min() == Math.pow(10, 310)

js> 2..toString()
 The bad and the ugly - misc

var array = [0]; js> Math.min() < Math.max()

=> false
js> array == array
=> true Math.min() == Infinity
Math.max() == -Infinity
js> array == !array
=> true js> Math.min() == Math.pow(10, 310)
=> true
js> 2..toString()
=>2
 Why bother?

goes enormous lengths (implicit casting, loose

syntax, etc) to keep backwards compatibility,
and to avoid crashing and errors that it impedes
usability and readability
tries to pretend that it has classes, but it doesn't
(not even es6 classes)
makes it easy to write messy code
hard to reason about what code does at first
glance due to its quirky nature
tries to accommodate a lot of programming
paradigms (imperative, object oriented, and
functional)
Why javascript is awesome

Really fast (for an interpreted language)

Reach - browsers, devices and servers
Easy to learn (many know it already)
Surprisingly powerful and expressive
Tons of reusable code
Huge ecosystem (npm, github, etc)
There are ways around the bad parts
stop me
and ask
Intermission

What happens when you type

google.com in your browser?
Server-side
As an asynchronous event driven
JavaScript runtime, Node is designed to
build scalable network applications
Node.js ecosystem

Over 250,000 packages

Many build on top of eachother
Hard to find, many do similar things
Documentation is not always great
 How does it all fit together?

Server Browser Other

express / restify MVVM Frameworks Common
Node Modules angular Rx.js
Files React Underscore
Database Vue.js Build tools / extensions
Process Ember Yarn / Wiredep
... UI Components Gulp / Grunt
Grids Typescript
Containers Coffeescript
LESS / SASS
Server tools
http-server
Forever
Why Typescript

All Javascript is already (bad) Typescript

Optional static typing and type inference
Enhanced IDE/tooling support
Javascript interoperability (via d.ts)
Null checks in 2.0, async in 2.1
Great industry adoption rate
 A taste of Typescript

interface Person {
firstName: string;
lastName: string;
}
class Student implements Person {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}

var user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);
Express.js

Web application framework

Key features
Routing
Maps http verbs and paths to function handlers;
Helps with binding of path variables, headers
and other data;
Middleware
Create a process for requests to go through;
For example, check authentication,
authorization, log, and respond;
Templates
Help defining return html / data / other as a
result of middleware or routing
 Express.js sample

var express = require('express');

var app = express();

app.get('/', function (req, res) {

res.send('Hello World!');
});

app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
 MongoDB

Fast
Small
Horizontally scalable
JSON / javascript

db.users.aggregate( [
{ $match: { status: A } },
{ $group: { _id: $age } } ])
AngularJS - templates

<body>
<my-app>Loading AppComponent
content here ...</my-app>
</body>
AngularJS - components

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`
});

export class AppComponent { name = 'Angular'; }

Where to start

Style guide
github.com/airbnb/javascript
Typescript
typescriptlang.org
Angular tutorial angular.io
MongoDb tutorial
docs.mongodb.com
Contributing to Open Source goo.gl/wNIofs
Visual Studio Code code.visualstudio.com
This presentation goo.gl/7sVSpc

Contact: me[at]cvlad[dot]info