javascript no longer a “toy” language

JAVASCRIPT NO LONGER A “TOY” LANGUAGE

AN LP NGUYENKMS TECHNOLOGY

19TH DEC 2015

ICE BREAKER

• 6-PERSON GROUPS

• GET TO KNOW EACH OTHERS

• SHARE YOUR NAME

• FILL MEMBER NAMES AS GROUP NAME

• ASK 3 MOST VALUABLE QUESTIONS

JAVASCRIPT - NO LONGER A “TOY” LANGUAGE

$whoami

▸ Front-end/backend developer in KMS Incubator

▸ Ruby lover since 2011

▸ Has been in a relationship with JavaScript since 2013

An LP [email protected]@crashbell


$whoareyou

▸ var, function, callback

▸ hoisting, prototype, closure

▸ fat arrow function, generator, async/await

JAVASCRIPT – NO LONGER A “TOY” LANGUAGE


AGENDA

▸ Javascript 90’s – A simple client-side scripting language

▸ Stacks Javascript has been involving

▸ Demo

▸ Significant updates from ES6 and ES7

▸ Quiz and Hands-on practices

▸ Takeaways


6

JAVASCRIPT IS MOST COMMONLY USED AS A CLIENT SIDE SCRIPTING LANGUAGE.

What is Javascript language? - Quora

JAVASCRIPT 90’S – A SIMPLE CLIENT-SIDE SCRIPTING LANGUAGE


Fun Facts

▸ Mocha, LiveScript and JavaScript

▸ “Java” in JavaScript was a marketing strategy

▸ JavaScript was developed at Netscape - Not Sun Microsystems

▸ JavaScript is nothing related to Java except C-like syntax


8


The 90’s▸ Annoying popups

▸ Status bars

▸ Mouseovers

▸ Auto scrolling

▸ Blinking texts

▸ No DOM, No CSS, No Regex

JavaScript was used in website for fun and

"annoying"Source: http://www.makeuseof.com/


9


Early 2000s

▸ Standardized by ECMA

▸ Add more features:

▸ Inline events

▸ DOM parser

▸ Window manipulation

▸ …

▸ Solve cross-browser compatibility problems (not all)

Source: http://www.w3devcampus.com/


Still for fun and "annoying"

JavaScript was a “toy” language which was used to decorate a website and solve cross-browser compatibilities

11

JAVASCRIPT IS EVERYWHERE. SO ARE WE ALL OK WITH THAT?

JavaScript Journey www.theregister.co.uk

STACKS JAVASCRIPT HAS BEEN INVOLVING

http://www.theregister.co.uk


Soucre: http://githut.info

13



Source: http://www.newspindigital.com/

MEAN

14


Front-End


▸ HTML5

▸ Single Page Application frameworks

▸ Front-end workflow

15


SPA Frameworks

Source: http://brewhouse.io


16


Front-End Workflow

Source: http://joellongie.com/


17


Backend


▸ Only NodeJS

▸ But… NodeJS is not backend web application

18


NodeJS

▸ Was invented in 2009

▸ Cross-platform runtime environment

▸ Built on Chrome's V8 JavaScript engine

▸ V8 compiles JavaScript to native machine code

▸ Event-driven architecture

▸ Non-blocking I/O API

▸ Not only for server-side web application!

Source: http://code-maven.com



NodeJS – Event Loop

Source: http://softwareengineeringdaily.com


20


MongoDB

▸ A cross-platform document-oriented database (NoSQL)

▸ Store JSON-like documents

▸ JavaScript object querying

▸ A perfect fit for Node.JS applications

Source: https://www.mongodb.com


21


Mobile/Desktop Applications

▸ Build cross-platform web-based desktop application with Electron

▸ React Native: A framework to build native mobile apps using React (Not a cross platform framework)

▸ Ionic: A framework to build web-based mobile apps using HTML5 & AngularJS


JavaScript can do almost everything now!


DEMO

REALTIME EDITOR SUPPORTS MARKDOWN

ELECTRON + REDUX + NODE.JS + SOCKET.IO


TEA BREAK

(IN 10 MINS)

25

IT’S THE NEXT VERSION OF JAVASCRIPT, AND IT HAS SOME GREAT NEW FEATURES.

ECMAScript 6 (ES6): What’s New In The Next Version Of JavaScript

www.smashingmagazine.com

SIGNIFICANT UPDATES FROM ES6/7


http://www.smashingmagazine.com

Here’s not a full walkthrough of ES6/7 features


What is ES6/7

▸ JavaScript has been standardized since 1998 under the name ECMAScript or ES

▸ ES has been designed by TC39 (Technical Committee 39)

▸ ES releases per year (since 2015)

▸ ES6 (ECMAScript 2015) was finalized on June 17, 2015

▸ ES7 (ECMAScript 2016) is work in process



MINOR UPDATES

▸ let and const

▸ let is var with block scope

▸ template literals



MINOR UPDATES

▸ fat arrow function

▸ () => {}

▸ For..Of



CLASSES

▸ Declare a class

▸ Initialize new object



ASYNC - CALLBACK HELL



ASYNC - PROMISE

▸ Simply understanding: it has success and failure callbacks



ASYNC - PROMISE



ASYNC - Chaining Promises



ASYNC - ASYNC/AWAIT


For more ES6 features please find here: http://es6-features.org

For ES7 async/await feature: https://github.com/tc39/ecmascript-asyncawait

Can’t wait for your current project? Check out https://babeljs.io a JavaScript compiler

https://github.com/tc39/ecmascript-asyncawait

https://babeljs.io


HANDS-ON PRACTICES


Q & A

Source: http://www.faithdeployed.com

40


TAKEAWAYS▸ JavaScript is no longer a toy and

amateur language. Let change your thought (if you have) about it.

▸ JavaScript has changed rapidly on many technology stacks

▸ New versions of JavaScript have come up very fast and a lot of changes on JavaScript.

▸ Get prepared yourself!

Source: http://99u.com


javascript no longer a “toy” language

Technology