SlideShare a Scribd company logo
Oscar Renalias 
Accenture 
Next-generation JavaScript 
October 17, 2014 
Media Partner 
Organizers 
Top Media Partner 
General Partner 
Supporters
Ask questions or rate the Speaker 
www.sli.do/openslava
@oscarrenalias 
github.com/oscarrenalias 
oscar.renalias@accenture.com 
oscar@renalias.net 
www.linkedin.com/oscarrenalias 
www.slideshare.net/oscarrenalias
History lesson picture 
(Very) Brief history of JavaScript
In the beginning there was JavaScript… on 
Netscape Navigator
ECMAScript, the JavaScript standardization 
1.0 1.1 … 1.8.5
The Ajax era, and the rest is history
Maybe JavaScript and the browser can be used 
to run complex and engaging applications?
It’s time to raise the JavaScript game
Frameworks 
Languages 
Platforms 
Standards 
Tools
JavaScript standards, catching up with the times
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!)
ECMAScript 6 – Classes and objects!
ECMAScript 6 – Promises, or “say goodbye to 
callback spaghetti”
ECMAScript 6 - Modules 
Export functionality (classes, functions, 
variables) from a module 
Use exported functionality from 
anywhere else
ECMAScript 6 Browser Support 
http://kangax.github.io/compat-table/es6/
Traceur is a JavaScript.next-to-JavaScript of 
today compiler
Languages, or “what if JavaScript is simply to 
become the assembly language of the web”?
Transpilers 
Language Transpiler
Dart 
• Classes 
• Optional typing 
• Annotations 
• Futures 
• Named constructors 
• (and many more)
TypeScript 
• Classes 
• Interfaces 
• Modules 
• Optional typing 
• Generics
Honorable Mentions 
ClojureScript Scala.js CoffeeScript
Emscripten 
Emscripten 
(LLVM) 
C 
C++
Raising the game with JavaScript frameworks
JavaScript Frameworks 
• MV* 
• Component-oriented 
• Isomorphic
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
Component-oriented frameworks 
Applications are made up of 
independent components 
that use each other to 
display data 
• React 
• Polymer 
• X-Tag 
• W3C Component Spec
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
JavaScript Next-Generation Tooling
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!
Automating application bootstrapping and code 
generation with Yeoman generators
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.
Testing and Quality 
Istambul 
ScanJs 
Plato 
• Unit testing 
• Mocks and spies 
• Browser testing 
• Rule-based code checks 
• Complexity analysis 
• Test coverage 
• Static code analysis mocha
Platforms
We wouldn’t be able to develop next-gen 
JavaScript applications without HTML5, CSS3 and 
the HTML APIs 
http://platform.html5.org
And state-of-the art JavaScript virtual machines 
(SpiderMonkey) (Nitro)
JavaScript on the server too?
Node.js is an asynchronous, event-based JavaScript platform 
for server-side applications running on the V8 JavaScript 
engine
Nashorn
To conclude…
Frameworks 
MV* DartAngular 
Languages 
Platforms 
TypeScript Dart CoffeeScript ClojureScript 
Nitro SpiderMonkey V8 Node.js Nashorn 
Tooling 
Istambul, 
Plato, etc 
SonarQube 
Grunt 
Gulp 
Yeoman 
Standards 
HTML5 
APIs 
JavaScript 
CSS 
Scala.js Transpilers, 
Emscripten 
React, 
Flight, etc 
JsHint 
Isomorphic 
Frameworks 
Express, 
Koa, etc 
ECMAScript

More Related Content

What's hot

Building a Modern JavaScript Framework by James Milner
Building a Modern JavaScript Framework by James MilnerBuilding a Modern JavaScript Framework by James Milner
Building a Modern JavaScript Framework by James Milner
dylanks
 
JavaScript History
JavaScript HistoryJavaScript History
JavaScript History
Rhio Kim
 
Java script fundamental - Introduction to JavaScript Programming Language
Java script fundamental - Introduction to JavaScript Programming LanguageJava script fundamental - Introduction to JavaScript Programming Language
Java script fundamental - Introduction to JavaScript Programming Language
Kimsea Sok
 
Web assembly overview by Mikhail Sorokovsky
Web assembly overview by Mikhail SorokovskyWeb assembly overview by Mikhail Sorokovsky
Web assembly overview by Mikhail Sorokovsky
Valeriia Maliarenko
 
An Introduction to WebAssembly
An Introduction to WebAssemblyAn Introduction to WebAssembly
An Introduction to WebAssembly
Daniel Budden
 
TypeScript Overview
TypeScript OverviewTypeScript Overview
TypeScript Overview
Aniruddha Chakrabarti
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
Laurent Duveau
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
Mir Ali
 
Brief History of JavaScript
Brief History of JavaScriptBrief History of JavaScript
Brief History of JavaScript
Rifad Ainun Nazieb
 
Mean stack
Mean stackMean stack
Mean stack
RavikantGautam8
 
Custom angular libraries
Custom angular librariesCustom angular libraries
Custom angular libraries
MattVaughn9
 
Power Leveling your TypeScript
Power Leveling your TypeScriptPower Leveling your TypeScript
Power Leveling your TypeScript
Offirmo
 
Typescript ppt
Typescript pptTypescript ppt
Typescript ppt
akhilsreyas
 
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
Einar Ingebrigtsen
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
TypeScript 101 - Studio Session - Accenture Liquid Studio
TypeScript 101 - Studio Session - Accenture Liquid StudioTypeScript 101 - Studio Session - Accenture Liquid Studio
TypeScript 101 - Studio Session - Accenture Liquid Studio
Frances Coronel
 
TypeScript intro
TypeScript introTypeScript intro
TypeScript intro
Ats Uiboupin
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
Laurent Duveau
 
TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!
Alessandro Giorgetti
 
Javascript - Lezione 0
Javascript - Lezione 0Javascript - Lezione 0
Javascript - Lezione 0
Robert Casanova
 

What's hot (20)

Building a Modern JavaScript Framework by James Milner
Building a Modern JavaScript Framework by James MilnerBuilding a Modern JavaScript Framework by James Milner
Building a Modern JavaScript Framework by James Milner
 
JavaScript History
JavaScript HistoryJavaScript History
JavaScript History
 
Java script fundamental - Introduction to JavaScript Programming Language
Java script fundamental - Introduction to JavaScript Programming LanguageJava script fundamental - Introduction to JavaScript Programming Language
Java script fundamental - Introduction to JavaScript Programming Language
 
Web assembly overview by Mikhail Sorokovsky
Web assembly overview by Mikhail SorokovskyWeb assembly overview by Mikhail Sorokovsky
Web assembly overview by Mikhail Sorokovsky
 
An Introduction to WebAssembly
An Introduction to WebAssemblyAn Introduction to WebAssembly
An Introduction to WebAssembly
 
TypeScript Overview
TypeScript OverviewTypeScript Overview
TypeScript Overview
 
TypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret WeaponTypeScript: Angular's Secret Weapon
TypeScript: Angular's Secret Weapon
 
JSFoo-2017 Takeaways
JSFoo-2017 TakeawaysJSFoo-2017 Takeaways
JSFoo-2017 Takeaways
 
Brief History of JavaScript
Brief History of JavaScriptBrief History of JavaScript
Brief History of JavaScript
 
Mean stack
Mean stackMean stack
Mean stack
 
Custom angular libraries
Custom angular librariesCustom angular libraries
Custom angular libraries
 
Power Leveling your TypeScript
Power Leveling your TypeScriptPower Leveling your TypeScript
Power Leveling your TypeScript
 
Typescript ppt
Typescript pptTypescript ppt
Typescript ppt
 
Sugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a timeSugarcoating your frontend one ViewModel at a time
Sugarcoating your frontend one ViewModel at a time
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
TypeScript 101 - Studio Session - Accenture Liquid Studio
TypeScript 101 - Studio Session - Accenture Liquid StudioTypeScript 101 - Studio Session - Accenture Liquid Studio
TypeScript 101 - Studio Session - Accenture Liquid Studio
 
TypeScript intro
TypeScript introTypeScript intro
TypeScript intro
 
Introduction to Angular for .NET Developers
Introduction to Angular for .NET DevelopersIntroduction to Angular for .NET Developers
Introduction to Angular for .NET Developers
 
TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!TypeScript . the JavaScript developer best friend!
TypeScript . the JavaScript developer best friend!
 
Javascript - Lezione 0
Javascript - Lezione 0Javascript - Lezione 0
Javascript - Lezione 0
 

Viewers also liked

Contents Page Progress
Contents Page ProgressContents Page Progress
Contents Page Progress
LucindaCorrieMedia
 
Prezenticii
PrezenticiiPrezenticii
Prezenticii
ylchik
 
Front Cover Progress
Front Cover ProgressFront Cover Progress
Front Cover Progress
LucindaCorrieMedia
 
Front Cover Progress 2
Front Cover Progress 2Front Cover Progress 2
Front Cover Progress 2
LucindaCorrieMedia
 
Questionnaire
QuestionnaireQuestionnaire
Questionnaire
LucindaCorrieMedia
 
Front Cover Progress
Front Cover ProgressFront Cover Progress
Front Cover Progress
LucindaCorrieMedia
 
What Have You Learnt About Technologies From the Process of Constructing This...
What Have You Learnt About Technologies From the Process of Constructing This...What Have You Learnt About Technologies From the Process of Constructing This...
What Have You Learnt About Technologies From the Process of Constructing This...
LucindaCorrieMedia
 
Analysis of Magazines
Analysis of MagazinesAnalysis of Magazines
Analysis of Magazines
LucindaCorrieMedia
 
Promocja usług edukacyjnych
Promocja  usług  edukacyjnychPromocja  usług  edukacyjnych
Promocja usług edukacyjnych
EwaRozanska
 
Empatic a kompetencje informacyjne
Empatic a kompetencje informacyjneEmpatic a kompetencje informacyjne
Empatic a kompetencje informacyjne
EwaRozanska
 
50 production deployments a day, at least
50 production deployments a day, at least50 production deployments a day, at least
50 production deployments a day, at least
Oscar Renalias
 
Omeneu instant (Asma Saleem Product Manager Neutro Pharma)
Omeneu   instant  (Asma Saleem Product Manager Neutro Pharma)Omeneu   instant  (Asma Saleem Product Manager Neutro Pharma)
Omeneu instant (Asma Saleem Product Manager Neutro Pharma)
Asma Saleem
 
OPSpedia demo MOH
OPSpedia demo MOHOPSpedia demo MOH
OPSpedia demo MOH
sprintmarathon
 
Case Study
Case StudyCase Study
Case Study
LucindaCorrieMedia
 
Tomasz
TomaszTomasz
Tomasz
tomili98
 
Lider Chocolate Catalog 2011
Lider Chocolate Catalog 2011Lider Chocolate Catalog 2011
Lider Chocolate Catalog 2011
Lider Chocolate and Food Industry Inc.
 

Viewers also liked (20)

Contents Page Progress
Contents Page ProgressContents Page Progress
Contents Page Progress
 
Prezenticii
PrezenticiiPrezenticii
Prezenticii
 
Front Cover Progress
Front Cover ProgressFront Cover Progress
Front Cover Progress
 
Front Cover Progress 2
Front Cover Progress 2Front Cover Progress 2
Front Cover Progress 2
 
MOVIE MAKER
MOVIE MAKERMOVIE MAKER
MOVIE MAKER
 
Questionnaire
QuestionnaireQuestionnaire
Questionnaire
 
Microsoft Word
Microsoft WordMicrosoft Word
Microsoft Word
 
Front Cover Progress
Front Cover ProgressFront Cover Progress
Front Cover Progress
 
What Have You Learnt About Technologies From the Process of Constructing This...
What Have You Learnt About Technologies From the Process of Constructing This...What Have You Learnt About Technologies From the Process of Constructing This...
What Have You Learnt About Technologies From the Process of Constructing This...
 
Analysis of Magazines
Analysis of MagazinesAnalysis of Magazines
Analysis of Magazines
 
Promocja usług edukacyjnych
Promocja  usług  edukacyjnychPromocja  usług  edukacyjnych
Promocja usług edukacyjnych
 
Empatic a kompetencje informacyjne
Empatic a kompetencje informacyjneEmpatic a kompetencje informacyjne
Empatic a kompetencje informacyjne
 
50 production deployments a day, at least
50 production deployments a day, at least50 production deployments a day, at least
50 production deployments a day, at least
 
Omeneu instant (Asma Saleem Product Manager Neutro Pharma)
Omeneu   instant  (Asma Saleem Product Manager Neutro Pharma)Omeneu   instant  (Asma Saleem Product Manager Neutro Pharma)
Omeneu instant (Asma Saleem Product Manager Neutro Pharma)
 
MOVIE MAKER
MOVIE MAKERMOVIE MAKER
MOVIE MAKER
 
OPSpedia demo MOH
OPSpedia demo MOHOPSpedia demo MOH
OPSpedia demo MOH
 
Publisher
PublisherPublisher
Publisher
 
Case Study
Case StudyCase Study
Case Study
 
Tomasz
TomaszTomasz
Tomasz
 
Lider Chocolate Catalog 2011
Lider Chocolate Catalog 2011Lider Chocolate Catalog 2011
Lider Chocolate Catalog 2011
 

Similar to Next-generation JavaScript - OpenSlava 2014

What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
Balajihope
 
TypeScript - Javascript done right
TypeScript - Javascript done rightTypeScript - Javascript done right
TypeScript - Javascript done right
Wekoslav Stefanovski
 
Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]
Ryan Cuprak
 
Java 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
Java 8: Nashorn & avatar.js di Enrico Risa al JUG RomaJava 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
Java 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
Vitalij Zadneprovskij
 
Benefits of an Open environment with Wakanda
Benefits of an Open environment with WakandaBenefits of an Open environment with Wakanda
Benefits of an Open environment with Wakanda
Alexandre Morgaut
 
Isomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornIsomorphic JavaScript with Nashorn
Isomorphic JavaScript with Nashorn
Maxime Najim
 
Asm.js introduction
Asm.js introductionAsm.js introduction
Asm.js introduction
Oleksii Prohonnyi
 
Dmytro Kochergin Angular 2 and New Java Script Technologies
Dmytro Kochergin Angular 2 and New Java Script TechnologiesDmytro Kochergin Angular 2 and New Java Script Technologies
Dmytro Kochergin Angular 2 and New Java Script Technologies
LogeekNightUkraine
 
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
Speedment, Inc.
 
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
Malin Weiss
 
Using Javascript in today's world
Using Javascript in today's worldUsing Javascript in today's world
Using Javascript in today's world
Sudar Muthu
 
Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
SANTOSH PATTNAIK
 
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav TulachJDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
PROIDEA
 
Top 10 frameworks of node js
Top 10 frameworks of node jsTop 10 frameworks of node js
Top 10 frameworks of node js
Habilelabs
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
IT Arena
 
T4T Training day - NodeJS
T4T Training day - NodeJST4T Training day - NodeJS
T4T Training day - NodeJS
Tim Sommer
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013
Alexandre Morgaut
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
WebStackAcademy
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, Future
Jungryul Choi
 
Get Started with JavaScript Frameworks
Get Started with JavaScript FrameworksGet Started with JavaScript Frameworks
Get Started with JavaScript Frameworks
Christian Gaetano
 

Similar to Next-generation JavaScript - OpenSlava 2014 (20)

What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 
TypeScript - Javascript done right
TypeScript - Javascript done rightTypeScript - Javascript done right
TypeScript - Javascript done right
 
Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]Java script nirvana in netbeans [con5679]
Java script nirvana in netbeans [con5679]
 
Java 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
Java 8: Nashorn & avatar.js di Enrico Risa al JUG RomaJava 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
Java 8: Nashorn & avatar.js di Enrico Risa al JUG Roma
 
Benefits of an Open environment with Wakanda
Benefits of an Open environment with WakandaBenefits of an Open environment with Wakanda
Benefits of an Open environment with Wakanda
 
Isomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornIsomorphic JavaScript with Nashorn
Isomorphic JavaScript with Nashorn
 
Asm.js introduction
Asm.js introductionAsm.js introduction
Asm.js introduction
 
Dmytro Kochergin Angular 2 and New Java Script Technologies
Dmytro Kochergin Angular 2 and New Java Script TechnologiesDmytro Kochergin Angular 2 and New Java Script Technologies
Dmytro Kochergin Angular 2 and New Java Script Technologies
 
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...
 
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...
 
Using Javascript in today's world
Using Javascript in today's worldUsing Javascript in today's world
Using Javascript in today's world
 
Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
 
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav TulachJDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
 
Top 10 frameworks of node js
Top 10 frameworks of node jsTop 10 frameworks of node js
Top 10 frameworks of node js
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
T4T Training day - NodeJS
T4T Training day - NodeJST4T Training day - NodeJS
T4T Training day - NodeJS
 
End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013End-to-end HTML5 APIs - The Geek Gathering 2013
End-to-end HTML5 APIs - The Geek Gathering 2013
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
 
JavaScript: Past, Present, Future
JavaScript: Past, Present, FutureJavaScript: Past, Present, Future
JavaScript: Past, Present, Future
 
Get Started with JavaScript Frameworks
Get Started with JavaScript FrameworksGet Started with JavaScript Frameworks
Get Started with JavaScript Frameworks
 

More from Oscar Renalias

Enterprise Open Source
Enterprise Open SourceEnterprise Open Source
Enterprise Open Source
Oscar Renalias
 
DockerCon EU 2017 - Containers are not just for microservices
DockerCon EU 2017 - Containers are not just for microservicesDockerCon EU 2017 - Containers are not just for microservices
DockerCon EU 2017 - Containers are not just for microservices
Oscar Renalias
 
Containers aren’t just for microservices – Containerizing Legacy Workloads
Containers aren’t just for microservices – Containerizing Legacy WorkloadsContainers aren’t just for microservices – Containerizing Legacy Workloads
Containers aren’t just for microservices – Containerizing Legacy Workloads
Oscar Renalias
 
DockerCon 2016 - Structured Container Delivery
DockerCon 2016 - Structured Container DeliveryDockerCon 2016 - Structured Container Delivery
DockerCon 2016 - Structured Container Delivery
Oscar Renalias
 
Containerize everything - Wildcardconf 2015
Containerize everything - Wildcardconf 2015Containerize everything - Wildcardconf 2015
Containerize everything - Wildcardconf 2015
Oscar Renalias
 
Node.js, for architects - OpenSlava 2013
Node.js, for architects - OpenSlava 2013Node.js, for architects - OpenSlava 2013
Node.js, for architects - OpenSlava 2013
Oscar Renalias
 
OpenSlava 2013 - Dynamic Languages
OpenSlava 2013 - Dynamic LanguagesOpenSlava 2013 - Dynamic Languages
OpenSlava 2013 - Dynamic Languages
Oscar Renalias
 
Asynchronous web apps with the Play Framework 2.0
Asynchronous web apps with the Play Framework 2.0Asynchronous web apps with the Play Framework 2.0
Asynchronous web apps with the Play Framework 2.0
Oscar Renalias
 
ScalaCheck Cookbook v1.0
ScalaCheck Cookbook v1.0ScalaCheck Cookbook v1.0
ScalaCheck Cookbook v1.0
Oscar Renalias
 
Unlocking value in your (big) data
Unlocking value in your (big) dataUnlocking value in your (big) data
Unlocking value in your (big) data
Oscar Renalias
 

More from Oscar Renalias (10)

Enterprise Open Source
Enterprise Open SourceEnterprise Open Source
Enterprise Open Source
 
DockerCon EU 2017 - Containers are not just for microservices
DockerCon EU 2017 - Containers are not just for microservicesDockerCon EU 2017 - Containers are not just for microservices
DockerCon EU 2017 - Containers are not just for microservices
 
Containers aren’t just for microservices – Containerizing Legacy Workloads
Containers aren’t just for microservices – Containerizing Legacy WorkloadsContainers aren’t just for microservices – Containerizing Legacy Workloads
Containers aren’t just for microservices – Containerizing Legacy Workloads
 
DockerCon 2016 - Structured Container Delivery
DockerCon 2016 - Structured Container DeliveryDockerCon 2016 - Structured Container Delivery
DockerCon 2016 - Structured Container Delivery
 
Containerize everything - Wildcardconf 2015
Containerize everything - Wildcardconf 2015Containerize everything - Wildcardconf 2015
Containerize everything - Wildcardconf 2015
 
Node.js, for architects - OpenSlava 2013
Node.js, for architects - OpenSlava 2013Node.js, for architects - OpenSlava 2013
Node.js, for architects - OpenSlava 2013
 
OpenSlava 2013 - Dynamic Languages
OpenSlava 2013 - Dynamic LanguagesOpenSlava 2013 - Dynamic Languages
OpenSlava 2013 - Dynamic Languages
 
Asynchronous web apps with the Play Framework 2.0
Asynchronous web apps with the Play Framework 2.0Asynchronous web apps with the Play Framework 2.0
Asynchronous web apps with the Play Framework 2.0
 
ScalaCheck Cookbook v1.0
ScalaCheck Cookbook v1.0ScalaCheck Cookbook v1.0
ScalaCheck Cookbook v1.0
 
Unlocking value in your (big) data
Unlocking value in your (big) dataUnlocking value in your (big) data
Unlocking value in your (big) data
 

Recently uploaded

Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
safelyiotech
 
Call Girls Bangalore🔥7023059433🔥Best Profile Escorts in Bangalore Available 24/7
Call Girls Bangalore🔥7023059433🔥Best Profile Escorts in Bangalore Available 24/7Call Girls Bangalore🔥7023059433🔥Best Profile Escorts in Bangalore Available 24/7
Call Girls Bangalore🔥7023059433🔥Best Profile Escorts in Bangalore Available 24/7
manji sharman06
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
widenerjobeyrl638
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
Tier1 app
 
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Ortus Solutions, Corp
 
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
dhavalvaghelanectarb
 
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdfTheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
Ortus Solutions, Corp
 
Computer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdfComputer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdf
chandangoswami40933
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
Paul Brebner
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
kalichargn70th171
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
ICS
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
wonyong hwang
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
VictoriaMetrics
 
Optimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptxOptimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptx
WebConnect Pvt Ltd
 
How GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdfHow GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdf
Zycus
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
confluent
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
michniczscribd
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
Yara Milbes
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
ShulagnaSarkar2
 

Recently uploaded (20)

Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
Safelyio Toolbox Talk Softwate & App (How To Digitize Safety Meetings)
 
Call Girls Bangalore🔥7023059433🔥Best Profile Escorts in Bangalore Available 24/7
Call Girls Bangalore🔥7023059433🔥Best Profile Escorts in Bangalore Available 24/7Call Girls Bangalore🔥7023059433🔥Best Profile Escorts in Bangalore Available 24/7
Call Girls Bangalore🔥7023059433🔥Best Profile Escorts in Bangalore Available 24/7
 
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
美洲杯赔率投注网【​网址​🎉3977·EE​🎉】
 
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSISDECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
DECODING JAVA THREAD DUMPS: MASTER THE ART OF ANALYSIS
 
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
Strengthening Web Development with CommandBox 6: Seamless Transition and Scal...
 
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024Flutter vs. React Native: A Detailed Comparison for App Development in 2024
Flutter vs. React Native: A Detailed Comparison for App Development in 2024
 
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdfTheFutureIsDynamic-BoxLang-CFCamp2024.pdf
TheFutureIsDynamic-BoxLang-CFCamp2024.pdf
 
Computer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdfComputer Science & Engineering VI Sem- New Syllabus.pdf
Computer Science & Engineering VI Sem- New Syllabus.pdf
 
Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...Superpower Your Apache Kafka Applications Development with Complementary Open...
Superpower Your Apache Kafka Applications Development with Complementary Open...
 
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
The Power of Visual Regression Testing_ Why It Is Critical for Enterprise App...
 
Upturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in NashikUpturn India Technologies - Web development company in Nashik
Upturn India Technologies - Web development company in Nashik
 
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA ComplianceSecure-by-Design Using Hardware and Software Protection for FDA Compliance
Secure-by-Design Using Hardware and Software Protection for FDA Compliance
 
Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)Hyperledger Besu 빨리 따라하기 (Private Networks)
Hyperledger Besu 빨리 따라하기 (Private Networks)
 
What’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 UpdateWhat’s New in VictoriaLogs - Q2 2024 Update
What’s New in VictoriaLogs - Q2 2024 Update
 
Optimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptxOptimizing Your E-commerce with WooCommerce.pptx
Optimizing Your E-commerce with WooCommerce.pptx
 
How GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdfHow GenAI Can Improve Supplier Performance Management.pdf
How GenAI Can Improve Supplier Performance Management.pdf
 
Building API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructureBuilding API data products on top of your real-time data infrastructure
Building API data products on top of your real-time data infrastructure
 
Beginner's Guide to Observability@Devoxx PL 2024
Beginner's  Guide to Observability@Devoxx PL 2024Beginner's  Guide to Observability@Devoxx PL 2024
Beginner's Guide to Observability@Devoxx PL 2024
 
The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024The Rising Future of CPaaS in the Middle East 2024
The Rising Future of CPaaS in the Middle East 2024
 
14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision14 th Edition of International conference on computer vision
14 th Edition of International conference on computer vision
 

Next-generation JavaScript - OpenSlava 2014

Editor's Notes

  1. I was here a year ago to talk about Node.js, so JavaScript on the server. And this year, well, forget that – we’re going with JavaScript everywhere, that’s my vision.
  2. And then someone makes fun of my vision… with this. And today I am here to tell you more about what “next-gen JavaScript” is all about. And I am going to make the case that it is already here!
  3. But before we do that, let’s have a look at a very brief history of JavaScript.
  4. JavaScript started as a way to add some dynamic behavior to JavaScript pages. Does anyone still remember the days of window.open and then using JavaScript to create pop-ups with dynamic content, or form validation with JavaScript? Those were the days of DHTML and form validation… on Netscape. JavaScript was first released as part of Netscape Navigator 2.0 in September 1995.
  5. In the meantime, Microsoft gave JavaScript a try by including it in Internet Explorer 3.0 and calling it JScript. Jscript and JavaScript were exactly the same, but in those days, obviously Microsoft could not be caught copying a competitor’s product’s name! Netscape submitted JavaScript for standardization to Ecma International, which resulted in several ECMAScript versions along the years. To clarify, ECMAScript is a definition while JavaScript is just one of the possible language implementations. Other implementations of ECMAScript are Microsoft’s JScript as well as ActionScript. Source: http://en.wikipedia.org/wiki/ECMAScript Ecma International is an international, private (membership-based) non-profit standards organization for information and communication system. Ecma aims to develop standards and technical reports to facilitate and standardize the use of information communication technology and consumer electronics (source: http://en.wikipedia.org/wiki/Ecma_International).
  6. To be fair to them, Microsoft created the first implementation of XMLHTTP ActiveX control in Internet Explorer 5, which was later adopted by Opera, Mozilla, Safari as the XmlHttpRequest object (and at that stage it was no longer an ActiveX control). Does anybody here remember this type of prehistoric XmlHttpRequest handling logic? The “Ajax” term was officially coined in Februray 2005 though Google had already been using this technique for their Gmail and Google Maps offering.
  7. And then we realized that maybe, maybe, maybe JavaScript and the browser can be used to run complex and engaging applications that replicate desktop-like experiences?
  8. So it’s time to kick things up a notch in the world of JavaScript. But, how far are we from next-gen JavaScript? A few slides ago I said that today I am here to tell you more about what “next-gen JavaScript” is all about… But now, let me make it clear: I am also going to make the case that it is already here!
  9. In order to bring some structure to “next-gen” JavaScript, we’re going to look at these four main areas.
  10. First, we start with the standards, which are decidedly catching up with the times. Image source: http://publicclockthis.blogspot.fi/2013/07/sunderland.html
  11. And the main standard for JavaScript, as mentioned before, is ECMAScript.. ECMAScript has had a few releases over the year (most recent released one is version 5) and now the committee is ready preparing ECMAScript 6 which is by far the most comprehensive release in a very long time. Some of these features have already been adopted as part of JavaScript 1.7/1.8 (like promises), and some of these, even if not officially approved, have already been adopted by state-of-the-art JavaScript engines such as V8 (some of these are available in Google Chrome). Out of all the content in ES 6 (also called “Harmony”), some of the changes are mere syntactic sugar (“let”), others are standardization of features that have been provided by 3rd party libraries for a long time (promises) and some others will definitely and fundamentally change the way we develop JavaScript applications. I picked 3 of these as examples, let’s have a look at them.
  12. First one: classes, and objects. We did not cover the basics of JavaScript today but JavaScript is NOT an object-oriented language, but rather a prototype-based language… or in other words, it’s got something that looks like classes, but classes they’re not. However, ES6 does bring classes into the picture, just like an OOP language. While I don’t think that classes and objects are and end-all be-all paradigm, they’ll definitely help to structure code and applications better. Source: http://www.wintellect.com/blogs/nstieglitz/5-great-features-in-es6-harmony
  13. Second is promises. Just look at a typical snippet of callback-based code where multiple asynchronous calls are chained because they need the data from the previous call, versus the same thing done with promises. It’s quite the change, and it should effectively solve the problem we’ve had with ‘callback spaghetti’ and ‘callback hell’. There are quite a few libraries out there that provide support for promises (Q, RSVP, Angular’s $q) and while they all offered an interface that look familiar, they all worked in slightly different ways. ECMAScript 6 intends to remove all external dependencies for promises and standardize them.
  14. And third one is modules. So far we’ve had the AMD specification and a couple of implementations such as Require.js, which has been fairly successful in the browser. There’s also CommonJs, which is the standard for server-side code in Node.js. ECMAScript 6 provides a common syntax that tries to combine both approaches. More details: http://www.2ality.com/2013/07/es6-modules.html
  15. Ok. I’m in. I want to go ECMAScript 6… which browsers support me? Well, 100%? None 
  16. Browser support isn’t fully there yet so we cannot use any of this goodness? Traceur can help us by providing a compiler that is capable of translating some (but not all) of the new ECMAScript 6 features into code that any older browser can run. Traceur can be incorporated into Grunt for automated compilation and into a traditional Grunt-based build workflow so it is pretty painless. Traceur can also generate source maps so that it’s possible to debug ECMAScript 6 source code even if it was compiled down to a lower version of the language. If traceur is not an option, there are also ‘polyfills’ that implement some of then newer ES6 functionality in browsers that don’t support ES6 yet. Polyfills may be an option when only a small part of ES6 is needed (e.g. promises or modules) and we don’t want to drag along the entire Traceur compile for a small bit of functionality.
  17. Now we’ve seen how I think that JavaScript standards have progressed towards their next-gen. And if we use a browser that is not there yet, no problem, use Traceur. But what if JavaScript as a language could be totally replaced with something that is better, and we could build frameworks on top of a better language? Do we need to support multiple virtual machines in btowsers? No. Full list of languages that compile to JavaScript: https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS
  18. We can use a transpiler. Transpilers are a general term that is not exclusive to JavaScript but that have recently received a lot of attention there. So language X comes in, it gets processed/compiled by the transpiler, and the output is JavaScript that any browser can run. Transpiled code isn’t pretty and it would be very hard to debug if we didn’t have source maps; source maps allow browsers that understand them to let you read and debug the language that was transpiled even though the browser executes JavaScript, and that’s very handy. Source maps are supported in Chrome and Firefox. So what potentially interesting languages do we have in the JavaScript world that get transpiled? Quite a few actually. To be honest, too many!
  19. Dart’s value proposition is that of a language that can run on its own VM (the Dart VM) and be compiled to JavaScript for browsers without the Dart VM and that improves JavaScript in a number of ways:
  20. TypeScript is a free and open source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language. As TypeScript is a superset of JavaScript, any existing JavaScript programs are also valid TypeScript programs. TypeScript compiles to ES3-compatible JavaScript. TypeScript supports header files which can contain type information of existing JavaScript libraries, enabling other programs to use objects defined in the header files as if they were strongly typed TypeScript objects. TypeScript adds support for features proposed classes, modules and an arrow function syntax as they are proposed in the upcoming ECMAScript 6 standard. Source: http://en.wikipedia.org/wiki/TypeScript
  21. Except CoffeeScript, both ClojureScript and Scala.js have solid computer science roots and they’re known for being solid (albeit a little difficult to pick up) languages. Thanks to ‘transpilers’, it is now possible to compile any of them from their native Clojure and Scala code to JavaScript code that any browser can execute. They both pretty much provide the same features as if they were used in their intended environment (the JVM) and can interact with a higher or lower degree of friction with native JavaScript libraries such as jQuery. CoffeeScript was designed as a “better JavaScript”. While I am personally not convinced that it achieved that goal, it still is a very concise and clean language that makes writing JavaScript code much more straightforward. Clojure: http://clojure.org/ Scala.js: http://www.scala-js.org/ CoffeeScript: http://coffeescript.org/
  22. LLVM, formerly known as “Low Level Virtual Machine”. LLVM was not designed as a transpiler, but as something more generic; the compiler generates some kind of intermediate bytecode and then that intermediate representation can be used to generate any output that we can think of: binary for native execution but also Java bytecode, or even JavaScript code. I do not think that LLVM will be the main focus of next-gen JavaScript development processes but it can be used in specific scenarios where we are converting complex applications to run in the browser… For example, the JavaScript Quake 3 port . Source: http://en.wikipedia.org/wiki/LLVM
  23. After standards and languages, it’s time to put things together and build next-generation frameworks that exploit our next-gen capabilities! This is by no means a comprehensive list of frameworks, but only an opinionated list of those that can, at the moment, make (or already making) the most dramatic impact to JavaScript next-generation applications. Image source: http://upload.wikimedia.org/wikipedia/commons/b/b7/Lorimerlite_framework.JPG
  24. There are literally hundreds of JavaScript client-side frameworks but if we look back in 10 years at what are the ones that were for one reason or another the most important ones, I think that 98% of us would agree with this list: Angular, Ember and Backbone. Although there are low-level differences in how things are done with each one of them, they all offer pretty similar capabilities: MV-something 2-way data binding (so updating a model causes an update to the view, and viceversa – all automatically) Integrated with HTML5 features such as the history API so that the back and forward buttons can be used just like in a normal site made up of static pages Templates, integrated in one way or another with the framework, e.g. Backbone can work with several template engines while in Angular it is built-in Compared to stitching together an application with jQuery, these do feel next-gen. Out of this list, my experience is with Angular and I can say that it makes building complex JavaScript applications a breeze. And when thinking of next-gen, Angular 2.0 is really looking to deliver a great development experience incorporating features of ECMAScript 6 and using Traceur to transpile to code that older browsers can run.
  25. Source code: http://facebook.github.io/react/docs/tutorial.html But next-gen JavaScript is also about evolving development paradigms and something that I believe will gain some relevance over the coming years is component-oriented development, where applications are built out of independent UI components that talk to each other to achieve application functionality. One of the most interesting is Facebook’s React.
  26. Another interesting framework is AngularDart; out of the frameworks I’m showing here this one is the most experimental of all. I would currently not recommend it for production use but it’s a great example of what can be achieved when we take a clean language and create a web framework on top of it.
  27. Isomorphic JavaScript is a technique grown from the fact that sometimes non-Js clients need to be supported while at the same time we want to provide a great front-end experience for those clients that do run JavaScript. So, we should write application functionality twice, once in a traditional JavaScript framework for Js-capable frameworks and once for non-Js frameworks? The answer is, obviously, no . Isomorphic frameworks let us write (and run!) the same code both in the server and in the client. It relies on things like virtual DOMs, Browserify and Node.js on the server to run the exact same code in the front and in the back. Meteor, Rendr and Derby are the most interesting options to come from the isomorphic camp.
  28. Image source: http://theperfecthidingplace.blogspot.fi/2012_11_01_archive.html. Last but not least: tooling. What good are languages and frameworks if the tooling sucks?
  29. First, task-oriented automation with Grunt and Gulp. For those of you who may have used Ant or Maven, these are the equivalent tools in the JavaScript world. Grunt is somewhat more mature as it’s been around for a while. Gulp is younger but it’s technologically speaking it’s a bit more interesting since it aims to structure our build tasks as flows of tasks that pipe inputs and output into each other, like a stream. Both are equally good. If only I had to say something, I’d suggest that you look at the plugins available for each and make sure that there’s something available for all the peculiar things that you may need to do during the build process.
  30. Yeoman is a code generation tool. As such, it can be used to automatically generate boilerplate code as long as there’s a generator that knows how to do it. There are hundreds of generators already available and creating custom ones (say, as part of your own project) is not a very big task. Automated code generation is very nice because a single command, like shown in the slide, can build a running application skeleton with a single command.
  31. Not too long ago handling 3rd party dependencies in front-end JavaScript development was a matter of keeping static copies of those dependencies in some libs/ folder, and then we struggled to keep that list of dependencies updated. And then bower was introduced. For those of you who have Java experience, Bower is to JavaScript what Maven’s dependency management is to the Java world. It’s a great and very flexible too. And npm is the same thing but for server-side Node.js development.
  32. Last but not least, a few more tools: JsHint: http://www.jshint.com/ - rule-based code analyzer SonarQube JavaScript plugin: http://docs.codehaus.org/display/SONAR/JavaScript+Plugin – well-known Java-based static code analyzer, which has support for JavaScript via plugins. SonarQube is a great tool and its support for JavaScript makes it invaluable. Istambul (code coverage): http://gotwarlost.github.io/istanbul/ - Code coverage tool for JavaScript Plato (code complexity): https://github.com/es-analysis/plato - Code complexity analyzer ScanJs (code analysis): https://github.com/mozilla/scanjs – Static code analyzer, developed by the Mozilla team Jasmine – BDD framework Mocha – Test execution Chai PhantomJs – headless WebKit for browser testing
  33. Source: http://upload.wikimedia.org/wikipedia/commons/a/ab/Oil_platform_P-51_(Brazil).jpg
  34. Source: unknown. List of HTML5 platform APIs: http://platform.html5.org/ We wouldn’t be able to do next-gen JavaScript applications without a HTML5 and CSS3, and the vast array of HTML5 APIs that are currently provided by the browser.
  35. Sources: History of JavaScript engines: http://en.wikipedia.org/wiki/JavaScript_engine Each major browser has its own vision for a virtual machine, and competition is proving to be great with the virtual machines outdoing each other every few releases. And they’re truly advanced. JIT compilation to native code, multi-stage compilers, etc. Whatever it takes to become the fastest.
  36. Please to my presentation from last year for more details 
  37. Even Oracle is catching up with the times with Nashorn, which is the next-generation JVM-based JavaScript engine that allows JavaScript code to be run on the Java virtual machine. There are a couple of interesting projects already happening on Nashorn, the most interesting of the bunch being Avatar.js which is an implementation of the Node.js standard library on Nashorn and JVM that will effectively allow Node.js applications to run unmodified on the JVM.
  38. Next-gen JavaScript is already here and we’re definitely able to address all the building blocks that we established in the beginning.