The document provides an overview of JavaScript technologies including Node.js and frontend frameworks like Angular and React. It discusses the history and evolution of JavaScript, the rise of Node.js for server-side applications, and characteristics of single-page applications. Angular is introduced as a TypeScript framework backed by Google with an MVC architecture using modules, components, templates and services. React is presented as a JavaScript library for building user interfaces using components, JSX, state and a virtual DOM. A comparison of Angular and React covers differences in architecture, learning curve, view handling and community support.

1. Javascript Technologies

2. Agenda
★ Overview (History, Current Status, MEAN or MERN)
★ Introduction to Nodejs
★ Frontend Frameworks
○ Introduction
○ Angular
○ React
★ Comparison (Angular vs React)

3. Agenda
★ Overview (History, Current Status, MEAN or MERN)
★ Introduction to Nodejs
★ Frontend Frameworks
○ Overview
○ Angular
○ React
★ Comparison (Angular vs React)

4. Overview
★ JavaScript was created in 1995 by Brendan Eich during his time at Netscape.
★ By 1996, the official ECMA specification had been submitted with both
Microsoft and Netscape implementing JavaScript in their flagship browsers.

5. Overview Cont.
Over the subsequent twenty years or so, there have been:
★ new versions of the ECMAScript specification
★ JavaScript libraries such as jQuery
★ Client-side JavaScript MVC frameworks
★ JavaScript controlling robots with Tessel
★ The rise of server-side JavaScript (node)

6. Overview cont. Ranking
★ GitHut - Programming Languages and GitHub
★ Stackoverflow - Most Popular Technologies

7. Overview cont. Node.js in Production
1. Node.js at PayPal
2. Ruby on Rails vs. Node.js at LinkedIn
3. 8 TOP COMPANIES THAT RELY ON NODE.JS
a. NETFLIX
b. UBER
c. PAYPAL
d. LINKEDIN
e. NASA
f. ...

8. Agenda
★ Overview (History, Current Status, MEAN)
★ Introduction to Nodejs
★ Frontend Frameworks
○ Overview
○ Angular
○ React
★ Comparison (Angular vs React)

9. What is the Node.js
Node.js is an
★ Open source
★ Event-driven
★ Cross-platform runtime environment
★ For building server side and networking applications using JavaScript

10. Synchronous or Blocking I/O

11. Non-blocking I/O cont.

12. Node.js Architecture

13. Node.js Programming Model
★ Asynchronous coding
○ Callback
○ Promises
○ Event Emitter

14. Node.js Features
★ Easy to learn (Javascript)
★ Full stack JavaScript
★ Concurrent request handling (Asynchronous I/O)
★ Lightweight (single Thread)
★ code sharing and reuse (Modularity)
★ Huge Community

15. Nodejs Frameworks
★ Node.js Frameworks

16. Node.js Frameworks
It’s better to understand all the technologies independently rather than expect all
applications to follow a single format.

17. Agenda
★ Overview (History, Current Status, MEAN)
★ Introduction to Nodejs
★ Frontend Frameworks
○ Overview
○ Angular
○ React
★ Comparison (Angular vs React)

18. Frontend Frameworks
Single Page Application
★ code can be retrieved in a single page load
★ data is sent / received using Ajax
★ improved performance

19. SPA Characteristics
★ Ajax
★ Templating
★ Routing

20. Agenda
★ Overview (History, Current Status, MEAN)
★ Introduction to Nodejs
★ Frontend Frameworks
○ Overview
○ Angular
○ React
★ Comparison (Angular vs React)

21. Angular
A Typescript web application Framework
★ Created in 2009 by Miško Hevery and Adam Abrons
★ Backed by Google
★ Angularjs 2010
★ Angular 2 2016
★ Angular is written in TypeScript.
★ Angular is complete MVC

22. Angular cont. Architecture
★ Module (ngModule)
★ Component
★ Template
★ Metadata
★ Service

23. Angular cont. Architecture

24. Angular cont. Architecture

25. Template Syntax
A template looks like regular HTML, except that it also contains Angular template
syntax, which alters the HTML based on your app's logic and the state of app and
DOM data. Your template can use:
★ Data binding to coordinate the app and DOM data,
★ Pipes to transform data before it is displayed.
★ Directives to apply app logic to what gets displayed.

26. Databinding
★ Interpolation
★ property binding.
★ Event binding
★ Two-way data binding

27. Agenda
★ Overview (History, Current Status, MEAN)
★ Introduction to Nodejs
★ Frontend Frameworks
○ Overview
○ Angular
○ React
★ Comparison (Angular vs React)

28. React
A JavaScript library for building user interfaces
★ Initial Release 2013
★ Less complex than other alternatives
★ Backed by Facebook
★ Component-based

29. React con. Architecture
★ Components
★ JSX
★ State
★ The virtual DOM
○ Why is the virtual DOM helpful: Batching

30. Thinking in React

31. Thinking in React
★ FilterableProductTable (orange): contains the
entirety of the example
★ SearchBar (blue): receives all user input
★ ProductTable (green): displays and filters the data
collection based on user input
★ ProductCategoryRow (turquoise): displays a
heading for each category
★ ProductRow (red): displays a row for each product

32. Agenda
★ Overview (History, Current Status, MEAN)
★ Introduction to Nodejs
★ Frontend Frameworks
○ Overview
○ Angular
○ React
★ Comparison (Angular vs React)

33. React vs Angular
Angular 2+ React
Description A Typescript web application Framework A JavaScript library for building user interfaces
Initial Release 2016 2013
Language Typescript Javascript ES6
Backed by Google Facebook
Mobile support Native-script React-native
Desktop support Yes Electron

34. React vs Angular
Architecture Module Component
Dependency Injection Yes
routing/form validation ... Maintained by Angular team Third party
Learning Curve Harder Easy
View or Template Html with directives and pipes JSX
Can use with multi-page application NO Yes

35. React vs Angular
Angular React
Jobs
Github
Stackoverflow
Google trends
Size (KB) More than 700 Les that 200
Community Support

36. References
★ Understanding the Node.js Event loop
★ Blocking vs Non-blocking System
★ Node.js core concepts

37. Thanks
Questions?