Organisation of professional JavaScript Projects

126
Organisation of professional JavaScript projects #1 – User don’t give about JavaScript #2 Application Life cycle Management for JavaScript #3 Case by Steve Meyns

Transcript of Organisation of professional JavaScript Projects

Organisation of professional

JavaScript projects

#1 – User don’t give about JavaScript

#2 – Application Life cycle Management for JavaScript

#3 – Case by Steve Meyns

JavaScript, c’est quoi?

Java != JavaScript

EcmaScript 3

Dojo Toolkit

jQuery

SproutCore/Ember

JavaScriptMVC

EcmaScript 5

RequireJS

Backbone.js

JavaScript MV*

Enhance

Build

1999

2014

2008

JavaScript is no longer just being used to enhance the user-experience on sites, it’s it’s begin used to build complex applications.

Users don’t give a f**k about JavaScript

They go Cross-Context

FACT #1

Responsive & Adaptive

Your application is:

They are mobile

FACT #2

67%of mobile internet

users are using

their devices

while watching TV

Where do you use the internet?

Online & Super fast

Your application is:

They expect a great

User Experience

FACT #3

Great User Interface

Your application has a:

They use many devices

FACT #4

Runs Everywhere

Your application:

Responsive & Adaptive

Online & Super fast

Great User Interface

Runs Everywhere

Requirements for a modern Web Application

Which technology to use?

Enables a great

User Experience

#1

Frugal on your bandwidth

#2

Run’s everywhere

#3

JavaScript, the best Runtime ever for

Web-Applications.

The year of JavaScript

2014

Tiobe Index

Rank Language Share Change

1 C 16.488% -1.85%

2 Java 15.345% -1.97%

4 C++ 6.612% -0.28%

3 Objective-C 6.024% -5.32%

5 C# 5.738% -0.71%

9 JavaScript 3.514% +1.58%

6 PHP 3.170% -1.05%

8 Python 2.882% +0.72%

0

100000

200000

300000

400000

500000

600000

2008 2009 2010 2011 2012 2013 2014

JavaScript

Java

Ruby

PHP

Obj-C

C#

Number of new GitHub repo’s

"Almost all 'real' programming

at the client side of Web

applications is done in

JavaScript."

Paul Jansen (Tiobe)

Large scale JavaScript is hard!

CTO @ Rent the Runway

50% 50%

Java Scheme Self

JavaScriptLiveScript

EcmaScript

Brendan Eich 1995

“Most of the people writing in

JavaScript are not programmers.

They lack the training and discipline

to write good programs.”

Douglas Crockford, 2001

“Through 2014, improved JavaScript

performance will begin to push HTML5

and the browser as a mainstream

enterprise application development

environment.”

Gartner, October 2013

“Another software technology will

come and kill of the web… And that

judgement day will come very soon –

in the next two or three years.”

George F. Colony, CEO Forrester Research, 2000

Microsoft abandoned the web in favor of the

X Internet

AJAX!- JavaScript's second chance

“Any application that can be

written in JavaScript, will

eventually be written in

JavaScript.”

Atwood’s Law 2007

We are slaves to JavaScript

because people have simply

started to accept its weirdness

and flaws, much like a Stockholm

Syndrome phenomenon.

Chris Richardson 2013

JavaScript in its childhood

#1 - Coding is hard

#2 - Quality Assurance

#3 - User Experience

#4 - Continuous Deployment

Large scale JavaScript is hard!

Developer Machine

Source Control Build Server Package feed Deployment Server

Coding

Code backup &

Code History

TFVC/Git TFSBuild/TeamCity

Integration

Testing & Coverage

Review

Packaging Deployment

Staging

environment

Production

environment

Testing

Acceptance

Production

Coding is hard

#1

?

typescriptlang.org

Typed superset of JavaScript

Compiles to plain JavaScript

Any browser

Any host

Any OS

Open Source

Modules

Classes

Interfaces

Inheritance

Generics

Static checking

Symbol-based navigation

Statement completion

Code refactoring

TypeScript

Starts from JavaScript

Ends with JavaScript

definitelytyped.org

DefinitelyTyped

The repository for high quality

TypeScript type definitions

jQuery

AngularJS

Jasmine

Toaster

Knockout

“TypeScript is JavaScript

for professional developers.”

Me, just now

[TypeScript] [Javascript]

Maintain Code Style

Detect bugs @ Compile time

Higher adoption rate

Less dependent on Heroes

What’s in it for you

Quality Assurance

#2

Quality is never an accident; it

is always the result of

intelligent effort.

John Ruskin 1889

Unit Testing

Unit

Isolation

Speed

Automatable

Coverage

TDD

BDD (given when then)

Testing framework

Test runner

Code Coverage tool

Automated with SonarQube

Code reviews

Bugs and Potential Bugs

Coding Standards Breach

Duplications

Lack of Unit Tests

Bad Distribution of Complexity

Spaghetti Design

Not Enough or Too Many Comments

Developer’s Seven Deadly Sins

Decreased Regression

Refactoring & Change = Less Hard

Enforce best practices

What’s in it for you

User Experience

#3

Single Page Application

more fluid user experience

akin to a desktop application

single page load

dynamic web server communication

Reduce

# HTTP requests

Network Traffic Load

Concatenation

Uglification

Minification

Developer Experience

GRUNTThe JavaScript Task Runner

Smooth User Interface

Responsive & Adaptive Interface

Less Server Load

Less Network Traffic

What’s in it for you

Continuous Deployment

#4

Packaging

Deployment

Enables Continuous Feedback

Facilitating Agile

Supporting Continuous Delivery

What’s in it for you

Developer Machine

Source Control Build Server Package feed Deployment Server

Coding

TypeScript

Code backup &

Code History

TFVC/Git NuGet

TFSBuild/TeamCity + Grunt/Gulp +

Karma + Jasmine + Istanbul

+ SonarQube Octopus Deploy

Integration

Testing & Coverage

Review

Packaging Deployment

Staging

environment

Production

environment

Testing

Acceptance

Production