JavaScript... it's everywhere!

JavaScript... it's everywhere!

JavaScript... it's everywhere!

JavaScript... it's everywhere!

• Dzone, Reddit, StackOverflow, ...
• JavaScript is populair
• Dagelijks nieuwe frameworks en libraries

Is it that good?

• Grote vooruitgang laatste decennium
• HTML5
• Explosieve groei van frameworks and libraries
• Application lifecycle tools (mede dankzij Node.js)

HTML5

Nieuwe frameworks

Application lifecycle

1. • Yo
   • Grunt
   • Bower
   • Component
   • PhantomJS
   • Karma
   • QUnit
   • Jasmine
   • The intern
   • ...
2. 

The "developer" improved

• Meer developers zijn op de hoogte van de DO en de DON'T's
• Vergelijken met "===" en "!=="
• Global namespace vermijden
• Gebruik van closures
• ...

Wat met de rest van de wereld

Microsoft

• Silverlight?
• Node.js voor Windows Server
• Internet Explorer & HTML5 support

Adobe

• Flash voor Linux + Android?
• Acquires Phonegap, platform voor mobile apps met HTML5 + CSS + JS

Java

• JavaServer Faces (JSF)?

Google

1. • Google Web Toolkit?
   • Enorm veel succes met AngularJS
   • Dart
2. 

IBM

• Lanceert cloud platform BlueMix met support voor Node.js + MongoDB
• Ontwikkelt Node-red, een Node.js variant voor Apache Camel
• Acquires Worklight, platform voor mobile apps met HTML5 + CSS + JS

Mozilla

• Research projecten zoals asm.js, Parallel JavaScript, ...
• Samenwerking met Epic: Unreal engine in browser
• Webmaker: Tutorials voor het maken van toepassingen op het web

JFrog

• Gekend van Artifactory
• Nu ook voor Node.js packages

Andere

1. eBay - ql.io

   

2. Paypal - KrakenJS

   

How do we do it?

3 stappen

• 1. RESTify your data

• 2. Front-end herwerken

• 3. Application lifecycle uitbreiden

RESTify your data

1. • Business data via web services
   • JSON of XML?
   • Multi-channel approach (mobile?)
   • Eenvoudige integratie met frameworks
2. 

Front-end herwerken

• Monoliet JS bestanden
• Hoe koppeling logica + HTML vermijden
• Structuur
• Testability
• Zijn daar design patterns voor?
• Model, View, Controller
  • HTML = view
  • Logica = controller

Uitbreiden van application lifecycle

1. • Dependency management
   • Minification + compressing
   • Unit testing
   • Steeds meer tooling dankzij Node.js
   • Yeoman
     • Yo: Project scaffolding
     • Grunt: Task runner
     • Bower: dependency management
     • Kunnen afzonderlijk geïnstalleerd worden
2. 

Uitbreiden van application lifecycle

Test, 1, 2, 3...

1. • Test je JavaScript code
   • JavaScript testing frameworks:
     • QUnit
     • Jasmine
   • KarmaJS test runner
     • Grunt plugin
     • Reporters
     • Browser
     • PhantomJS: Headless testen
2. 

Uitbreiden van application lifecycle

Voorbeeld lifecycle

1. Start project: Project scaffolding met Yo
2. Development project:
   • Dependency management met Bower
   • Versionering van dependencies
   • Code quality + test coverage met Grunt
3. Deployment project: Deployment in cloud met Grunt
4. Continuous integration: Met Jenkins (of Travis CI)
5. Versioning: Git
   • Project kan herbruikt worden in andere projecten
   • Tagging releases: Bower dependency versies

Toekomst

• Met deze drie stappen ben je klaar voor de toekomst
• Node.js? Back-end aanpassen
• Mobile? Nieuwe app op basis van business services

Toekomst

Get MEAN

1. • Full JavaScript stack
     • MongoDB: NoSQL database (JSON/BSON documenten)
     • Express: Web framework voor Node.js
     • AngularJS: Client-side MVC framework
     • Node.js: JavaScript platform
   • Ook andere stacks bestaan:
     • Meteor
     • Nodember
     • ...
2.