Download - Next-generation JavaScript - OpenSlava 2014
![Page 1: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/1.jpg)
Media Partner
Organizers
Top Media Partner
General Partner
Supporters
Oscar RenaliasAccenture
Next-generation JavaScriptOctober 17, 2014
![Page 2: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/2.jpg)
Ask questions or rate the Speaker
www.sli.do/openslava
![Page 3: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/3.jpg)
@oscarrenalias
github.com/oscarrenalias
www.linkedin.com/oscarrenalias
www.slideshare.net/oscarrenalias
![Page 4: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/4.jpg)
![Page 5: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/5.jpg)
![Page 6: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/6.jpg)
History lesson picture
(Very) Brief history of JavaScript
![Page 7: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/7.jpg)
In the beginning there was JavaScript… on Netscape Navigator
![Page 8: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/8.jpg)
ECMAScript, the JavaScript standardization
1.0 1.1 … 1.8.5
![Page 9: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/9.jpg)
The Ajax era, and the rest is history
![Page 10: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/10.jpg)
Maybe JavaScript and the browser can be used to run complex and engaging applications?
![Page 11: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/11.jpg)
It’s time to raise the JavaScript game
![Page 12: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/12.jpg)
Platforms
Languages
Frameworks
Standards
Tools
![Page 13: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/13.jpg)
JavaScript standards, catching up with the times
![Page 14: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/14.jpg)
ECMAScript 6
ECMAScript is the standardized version of JavaScript
• Classes
• Block scoping with ‘let’
• Destructuring
• Generators
• Comprehensions
• Modules
• Promises
• Reflection API
• Tail calls
• Template literals
• (and many more!)
![Page 15: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/15.jpg)
ECMAScript 6 – Classes and objects!
![Page 16: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/16.jpg)
ECMAScript 6 – Promises, or “say goodbye to callback spaghetti”
![Page 17: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/17.jpg)
ECMAScript 6 - Modules
Export functionality (classes, functions, variables) from a module
Use exported functionality from anywhere else
![Page 18: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/18.jpg)
ECMAScript 6 Browser Support
http://kangax.github.io/compat-table/es6/
![Page 19: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/19.jpg)
Traceur is a JavaScript.next-to-JavaScript of today compiler
![Page 20: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/20.jpg)
Languages, or “what if JavaScript is simply to become the assembly language of the web”?
![Page 21: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/21.jpg)
Transpilers
TranspilerLanguage
![Page 22: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/22.jpg)
Dart
• Classes
• Optional typing
• Annotations
• Futures
• Named constructors
• (and many more)
![Page 23: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/23.jpg)
TypeScript
• Classes
• Interfaces
• Modules
• Optional typing
• Generics
![Page 24: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/24.jpg)
Honorable Mentions
ClojureScript Scala.js CoffeeScript
![Page 25: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/25.jpg)
Emscripten
Emscripten(LLVM)
CC++
![Page 26: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/26.jpg)
Raising the game with JavaScript frameworks
![Page 27: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/27.jpg)
JavaScript Frameworks
• MV*
• Component-oriented
• Isomorphic
![Page 28: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/28.jpg)
MV* Frameworks
• Generally MV* - MVC, MVP, MVVM, etc
• Support for 2-way data binding
• Integration with HTML5, e.g. back button history API support
• Templates
![Page 29: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/29.jpg)
Component-oriented frameworks
Applications are made up of independent components that use each other to display data
• React• Polymer• X-Tag• W3C Component Spec
![Page 30: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/30.jpg)
Isomorphic JavaScript – write code once, run in client *and* server
Meteor
Derby
Isomorphic JavaScript frameworks use techniques such as Browserify and virtual DOMs to be able to render content and templates regardless of where the application runs
![Page 31: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/31.jpg)
JavaScript Next-Generation Tooling
![Page 32: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/32.jpg)
Development automation with Grunt and Gulp
• Live reload• Trask triggering based on changes to files• Automated minification and concatenation• Code compilation, integration with Dart, TypeScript,
others• Packaging and Deployment• Automated LESS/SASS compilation• …and many more!
![Page 33: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/33.jpg)
Automating application bootstrapping and code generation with Yeoman generators
![Page 34: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/34.jpg)
Package and dependency management
Bower (browser development) and NPM (Node.js development) provide world class support to manage 3rd party dependencies for any type of JavaScript application.
![Page 35: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/35.jpg)
Testing and Quality
Plato
Istambul
ScanJs
• Unit testing• Mocks and spies• Browser testing• Rule-based code checks• Complexity analysis• Test coverage• Static code analysis mocha
![Page 36: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/36.jpg)
Platforms
![Page 37: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/37.jpg)
We wouldn’t be able to develop next-gen JavaScript applications without HTML5, CSS3 and the HTML APIs
http://platform.html5.org
![Page 38: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/38.jpg)
And state-of-the art JavaScript virtual machines
(SpiderMonkey) (Nitro)
![Page 39: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/39.jpg)
JavaScript on the server too?
![Page 40: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/40.jpg)
Node.js is an asynchronous, event-based JavaScript platform for server-side applications running on the V8 JavaScript engine
![Page 41: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/41.jpg)
Nashorn
![Page 42: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/42.jpg)
To conclude…
![Page 43: Next-generation JavaScript - OpenSlava 2014](https://reader038.vdocuments.us/reader038/viewer/2022103021/55d57988bb61eb9f2f8b4665/html5/thumbnails/43.jpg)
Platforms
Languages
TypeScript Dart CoffeeScript ClojureScript
Frameworks
MV* DartAngular
V8SpiderMonkeyNitro NashornNode.js
Tooling
Yeoman
Gulp
Grunt
Standards
HTML5 APIs
JavaScript
CSS
Scala.jsTranspilers, Emscripten
React, Flight, etc
JsHint
SonarQube
Istambul, Plato, etc
Isomorphic Frameworks
Express, Koa, etc
ECMAScript