.
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
