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

Organisation of professional JavaScript Projects

Jul 15, 2015

Download

Technology

Involved IT
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 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

Page 2: Organisation of professional JavaScript Projects

JavaScript, c’est quoi?

Page 3: Organisation of professional JavaScript Projects

Java != JavaScript

Page 4: Organisation of professional JavaScript Projects

EcmaScript 3

Dojo Toolkit

jQuery

SproutCore/Ember

JavaScriptMVC

EcmaScript 5

RequireJS

Backbone.js

JavaScript MV*

Enhance

Build

1999

2014

2008

Page 5: Organisation of professional JavaScript Projects

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

Page 6: Organisation of professional JavaScript Projects

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

Page 7: Organisation of professional JavaScript Projects

They go Cross-Context

FACT #1

Page 8: Organisation of professional JavaScript Projects
Page 9: Organisation of professional JavaScript Projects
Page 10: Organisation of professional JavaScript Projects
Page 11: Organisation of professional JavaScript Projects
Page 12: Organisation of professional JavaScript Projects
Page 13: Organisation of professional JavaScript Projects
Page 14: Organisation of professional JavaScript Projects
Page 15: Organisation of professional JavaScript Projects

Responsive & Adaptive

Your application is:

Page 16: Organisation of professional JavaScript Projects

They are mobile

FACT #2

Page 17: Organisation of professional JavaScript Projects
Page 18: Organisation of professional JavaScript Projects

67%of mobile internet

users are using

their devices

while watching TV

Page 19: Organisation of professional JavaScript Projects

Where do you use the internet?

Page 20: Organisation of professional JavaScript Projects

Online & Super fast

Your application is:

Page 21: Organisation of professional JavaScript Projects

They expect a great

User Experience

FACT #3

Page 22: Organisation of professional JavaScript Projects
Page 23: Organisation of professional JavaScript Projects
Page 24: Organisation of professional JavaScript Projects
Page 25: Organisation of professional JavaScript Projects

Great User Interface

Your application has a:

Page 26: Organisation of professional JavaScript Projects

They use many devices

FACT #4

Page 27: Organisation of professional JavaScript Projects
Page 28: Organisation of professional JavaScript Projects
Page 29: Organisation of professional JavaScript Projects

Runs Everywhere

Your application:

Page 30: Organisation of professional JavaScript Projects

Responsive & Adaptive

Online & Super fast

Great User Interface

Runs Everywhere

Requirements for a modern Web Application

Page 31: Organisation of professional JavaScript Projects

Which technology to use?

Page 32: Organisation of professional JavaScript Projects

Enables a great

User Experience

#1

Page 33: Organisation of professional JavaScript Projects

Frugal on your bandwidth

#2

Page 34: Organisation of professional JavaScript Projects

Run’s everywhere

#3

Page 35: Organisation of professional JavaScript Projects
Page 36: Organisation of professional JavaScript Projects
Page 37: Organisation of professional JavaScript Projects
Page 38: Organisation of professional JavaScript Projects

JavaScript, the best Runtime ever for

Web-Applications.

Page 39: Organisation of professional JavaScript Projects

The year of JavaScript

2014

Page 40: Organisation of professional JavaScript Projects

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%

Page 41: Organisation of professional JavaScript Projects

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

Page 42: Organisation of professional JavaScript Projects

"Almost all 'real' programming

at the client side of Web

applications is done in

JavaScript."

Paul Jansen (Tiobe)

Page 43: Organisation of professional JavaScript Projects

Large scale JavaScript is hard!

Page 44: Organisation of professional JavaScript Projects

CTO @ Rent the Runway

Page 45: Organisation of professional JavaScript Projects

50% 50%

Page 46: Organisation of professional JavaScript Projects

Java Scheme Self

JavaScriptLiveScript

EcmaScript

Brendan Eich 1995

Page 47: Organisation of professional JavaScript Projects

“Most of the people writing in

JavaScript are not programmers.

They lack the training and discipline

to write good programs.”

Douglas Crockford, 2001

Page 48: Organisation of professional JavaScript Projects

“Through 2014, improved JavaScript

performance will begin to push HTML5

and the browser as a mainstream

enterprise application development

environment.”

Gartner, October 2013

Page 49: Organisation of professional JavaScript Projects

“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

Page 50: Organisation of professional JavaScript Projects

Microsoft abandoned the web in favor of the

X Internet

Page 51: Organisation of professional JavaScript Projects

AJAX!- JavaScript's second chance

Page 52: Organisation of professional JavaScript Projects

“Any application that can be

written in JavaScript, will

eventually be written in

JavaScript.”

Atwood’s Law 2007

Page 53: Organisation of professional JavaScript Projects

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

Page 54: Organisation of professional JavaScript Projects

JavaScript in its childhood

Page 55: Organisation of professional JavaScript Projects
Page 56: Organisation of professional JavaScript Projects
Page 57: Organisation of professional JavaScript Projects
Page 58: Organisation of professional JavaScript Projects
Page 59: Organisation of professional JavaScript Projects

#1 - Coding is hard

#2 - Quality Assurance

#3 - User Experience

#4 - Continuous Deployment

Large scale JavaScript is hard!

Page 60: Organisation of professional JavaScript Projects

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

Page 61: Organisation of professional JavaScript Projects

Coding is hard

#1

Page 62: Organisation of professional JavaScript Projects

?

Page 63: Organisation of professional JavaScript Projects

typescriptlang.org

Page 64: Organisation of professional JavaScript Projects

Typed superset of JavaScript

Compiles to plain JavaScript

Any browser

Any host

Any OS

Open Source

Page 65: Organisation of professional JavaScript Projects

Modules

Classes

Interfaces

Inheritance

Generics

Page 66: Organisation of professional JavaScript Projects

Static checking

Symbol-based navigation

Statement completion

Code refactoring

Page 67: Organisation of professional JavaScript Projects

TypeScript

Starts from JavaScript

Ends with JavaScript

Page 68: Organisation of professional JavaScript Projects

definitelytyped.org

Page 69: Organisation of professional JavaScript Projects

DefinitelyTyped

The repository for high quality

TypeScript type definitions

Page 70: Organisation of professional JavaScript Projects

jQuery

AngularJS

Jasmine

Toaster

Knockout

Page 71: Organisation of professional JavaScript Projects

“TypeScript is JavaScript

for professional developers.”

Me, just now

Page 72: Organisation of professional JavaScript Projects
Page 73: Organisation of professional JavaScript Projects
Page 74: Organisation of professional JavaScript Projects

[TypeScript] [Javascript]

Page 75: Organisation of professional JavaScript Projects
Page 76: Organisation of professional JavaScript Projects

Maintain Code Style

Detect bugs @ Compile time

Higher adoption rate

Less dependent on Heroes

What’s in it for you

Page 77: Organisation of professional JavaScript Projects

Quality Assurance

#2

Page 78: Organisation of professional JavaScript Projects
Page 79: Organisation of professional JavaScript Projects

Quality is never an accident; it

is always the result of

intelligent effort.

John Ruskin 1889

Page 80: Organisation of professional JavaScript Projects

Unit Testing

Unit

Isolation

Speed

Automatable

Coverage

Page 81: Organisation of professional JavaScript Projects

TDD

BDD (given when then)

Page 82: Organisation of professional JavaScript Projects

Testing framework

Test runner

Code Coverage tool

Page 83: Organisation of professional JavaScript Projects
Page 84: Organisation of professional JavaScript Projects
Page 85: Organisation of professional JavaScript Projects
Page 86: Organisation of professional JavaScript Projects
Page 87: Organisation of professional JavaScript Projects
Page 88: Organisation of professional JavaScript Projects
Page 89: Organisation of professional JavaScript Projects
Page 90: Organisation of professional JavaScript Projects
Page 91: Organisation of professional JavaScript Projects
Page 92: Organisation of professional JavaScript Projects
Page 93: Organisation of professional JavaScript Projects
Page 94: Organisation of professional JavaScript Projects
Page 95: Organisation of professional JavaScript Projects

Automated with SonarQube

Code reviews

Page 96: Organisation of professional JavaScript Projects

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

Page 97: Organisation of professional JavaScript Projects
Page 98: Organisation of professional JavaScript Projects
Page 99: Organisation of professional JavaScript Projects

Decreased Regression

Refactoring & Change = Less Hard

Enforce best practices

What’s in it for you

Page 100: Organisation of professional JavaScript Projects

User Experience

#3

Page 101: Organisation of professional JavaScript Projects
Page 102: Organisation of professional JavaScript Projects

Single Page Application

Page 103: Organisation of professional JavaScript Projects

more fluid user experience

akin to a desktop application

single page load

dynamic web server communication

Page 104: Organisation of professional JavaScript Projects
Page 105: Organisation of professional JavaScript Projects

Reduce

# HTTP requests

Network Traffic Load

Page 106: Organisation of professional JavaScript Projects

Concatenation

Uglification

Minification

Page 107: Organisation of professional JavaScript Projects

Developer Experience

Page 108: Organisation of professional JavaScript Projects

GRUNTThe JavaScript Task Runner

Page 109: Organisation of professional JavaScript Projects
Page 110: Organisation of professional JavaScript Projects
Page 111: Organisation of professional JavaScript Projects
Page 112: Organisation of professional JavaScript Projects
Page 113: Organisation of professional JavaScript Projects
Page 114: Organisation of professional JavaScript Projects
Page 115: Organisation of professional JavaScript Projects

Smooth User Interface

Responsive & Adaptive Interface

Less Server Load

Less Network Traffic

What’s in it for you

Page 116: Organisation of professional JavaScript Projects

Continuous Deployment

#4

Page 117: Organisation of professional JavaScript Projects
Page 118: Organisation of professional JavaScript Projects

Packaging

Deployment

Page 119: Organisation of professional JavaScript Projects
Page 120: Organisation of professional JavaScript Projects
Page 121: Organisation of professional JavaScript Projects
Page 122: Organisation of professional JavaScript Projects
Page 123: Organisation of professional JavaScript Projects

Enables Continuous Feedback

Facilitating Agile

Supporting Continuous Delivery

What’s in it for you

Page 124: Organisation of professional JavaScript Projects

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

Page 125: Organisation of professional JavaScript Projects
Page 126: Organisation of professional JavaScript Projects