This slide was presented at KMS public seminar took place on March 26, 2016.

1. JAVASCRIPT
NO LONGER A “TOY” LANGUAGE
AN LP NGUYEN
KMS TECHNOLOGY
26TH MAR 2016

2. ICE BREAKER
• 6-PERSON GROUPS
• GET TO KNOW EACH OTHERS
• SHARE YOUR NAME
• FILL MEMBER NAMES AS GROUP NAME
• ASK THE MOST VALUABLE QUESTION
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

3. 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 Nguyen
anlpnguyen@kms-technology.com
@crashbell
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

4. JAVASCRIPT - NO LONGER A “TOY” LANGUAGE
$whoareyou
▸ var, function, callback
▸ hoisting, prototype, closure
▸ fat arrow function, generator, async/await
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

5. JAVASCRIPT - NO LONGER A “TOY” LANGUAGE
AGENDA
▸ A toy language
▸ Stacks Javascript has been involving
▸ Significant updates from ES6 and ES7
▸ Demo
▸ Quiz
▸ Takeaways
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

6. JAVASCRIPT IS MOST COMMONLY
USED AS A CLIENT SIDE SCRIPTING
LANGUAGE.
What is Javascript language? - Quora
JAVASCRIPT - A TOY LANGUAGE

7. JAVASCRIPT - A TOY 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
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

8. JAVASCRIPT - A TOY LANGUAGE
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/
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

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

10. JAVASCRIPT IS EVERYWHERE.
SO ARE WE ALL OK WITH THAT?
JavaScript Journey www.theregister.co.uk
STACKS JAVASCRIPT HAS BEEN INVOLVING

11. STACKS JAVASCRIPT HAS BEEN INVOLVING
Source: http://githut.info

12. STACKS JAVASCRIPT HAS BEEN INVOLVING
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
STACKS
▸ Backend
▸ Front-end
▸ Database & Mobile/Desktop

13. BACKEND
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
STACKS JAVASCRIPT HAS BEEN INVOLVING

14. STACKS JAVASCRIPT HAS BEEN INVOLVING
NodeJS
▸ Cross-platform runtime environment
▸ Built on Chrome's V8 JavaScript engine
▸ Event-driven architecture
▸ Non-blocking I/O API
Source: http://code-maven.com
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

15. STACKS JAVASCRIPT HAS BEEN INVOLVING
NodeJS – Event Loop
Source: http://softwareengineeringdaily.com
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

16. STACKS JAVASCRIPT HAS BEEN INVOLVING
Source: http://www.slideshare.net/yurabogdanov/nodejs-talken
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
NodeJS – CPU BOUND & IO BOUND

17. STACKS JAVASCRIPT HAS BEEN INVOLVING
Backend frameworks
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
▸ Express: A minimal and flexible Node.js web
application framework that provides a robust set of
features for web and mobile applications.
▸ koa: A new web framework designed by the team
behind Express, which aims to be a smaller, more
expressive, and more robust foundation for web
applications and APIs.
▸ Hapi: Enables developers to focus on writing
reusable application logic instead of spending time
building infrastructure.

18. FRONT-END
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
STACKS JAVASCRIPT HAS BEEN INVOLVING

19. STACKS JAVASCRIPT HAS BEEN INVOLVING
SPA Frameworks
Source: http://brewhouse.io
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

20. STACKS JAVASCRIPT HAS BEEN INVOLVING
Front-End Workflow
Source: http://joellongie.com/
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

21. STACKS JAVASCRIPT HAS BEEN INVOLVING
My current front-end tools & frameworks
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
▸ Package manager: NPM
▸ Task runner: Gulp
▸ Module bundler: Webpack
▸ Framework: React + Redux
▸ Test framework: Mocha
▸ Code quality tool: ESlint, Babel

22. DATABASES & MOBILE/DESKTOP
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
STACKS JAVASCRIPT HAS BEEN INVOLVING

23. STACKS JAVASCRIPT HAS BEEN INVOLVING
Databases
▸ Apache CouchDB™: A database that uses JSON
for documents, JavaScript for MapReduce
indexes, and regular HTTP for its API
▸ MongoDB: A cross-platform document-oriented
database (NoSQL), use JSON for documents
JavaScript object querying
▸ PouchDB: A database within browser was
created to help web developers build
applications that work as well offline as they do
online.
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

24. STACKS JAVASCRIPT HAS BEEN INVOLVING
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)
▸ Cordova: Wraps your HTML/JavaScript
app into a native container which can
access the device functions of several
platforms.
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

25. JavaScript can do almost everything now!

26. JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
TEA BREAK
(IN 10 MINS)

27. 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
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

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

29. SIGNIFICANT UPDATES FROM ES6/7
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
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

30. SIGNIFICANT UPDATES FROM ES6/7
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

31. SIGNIFICANT UPDATES FROM ES6/7
MINOR UPDATES
▸ let and const
▸ let is var with block scope
▸ template literals
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

32. SIGNIFICANT UPDATES FROM ES6/7
MINOR UPDATES
▸ fat arrow function
▸ () => {}
▸ For..Of
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

33. SIGNIFICANT UPDATES FROM ES6/7
CLASSES
▸ Declare a class
▸ Initialize new object
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

34. SIGNIFICANT UPDATES FROM ES6/7
ASYNC - CALLBACK HELL
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

35. SIGNIFICANT UPDATES FROM ES6/7
ASYNC - PROMISE
▸ Simply understanding: it has success and failure
callbacks
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

36. SIGNIFICANT UPDATES FROM ES6/7
ASYNC - PROMISE
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

37. SIGNIFICANT UPDATES FROM ES6/7
ASYNC - Chaining Promises
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

38. SIGNIFICANT UPDATES FROM ES6/7
ASYNC - ASYNC/AWAIT
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

39. For more ES6 features please find here:
http://es6-features.org
For ES7 async/await feature:
https://github.com/tc39/ecmascript-
asyncawait

40. JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
DEMO
REDUX + BABEL + WEBPACK

41. JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
QUIZ

42. JAVASCRIPT - NO LONGER A “TOY” LANGUAGE
QUIZ - 1
What does NPM stand for?
1. Node Pulling Message
2. Node Package Management
3. Node Package Minimization
4. Node Package Manager
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

43. JAVASCRIPT - NO LONGER A “TOY” LANGUAGE
QUIZ - 2
What is React Native?
1. Cross-platform framework
2. Web-based mobile application
3. Building native apps with JavaScript
4. Desktop builder
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

44. JAVASCRIPT - NO LONGER A “TOY” LANGUAGE
QUIZ 3 - Template Literals
What is correct convert?
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

45. JAVASCRIPT - NO LONGER A “TOY” LANGUAGE
Open Question
JAVASCRIPT – NO LONGER A “TOY” LANGUAGE

46. JAVASCRIPT - NO LONGER A “TOY” LANGUAGE
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

47. JAVASCRIPT – NO LONGER A “TOY” LANGUAGE
Q & A
Source: http://www.faithdeployed.com

48. THANK YOU
© 2013 KMS Technology