New Face of JavaScript
Speaker
Paradigms of JS
- Prototype-based
- Functional
- Imperative
- Declerative
- Object Oriented
Prototype-based
You don't need "class" to create similar object.
Functional
- Pure functions
- Function composition
- Avoid shared state
- Avoid mutating state
- Avoid side effects
Functional
Programming
- Pure functions
- Function composition
- Avoid shared state
- Avoid mutating state
- Avoid side effects
Object Oriented
Paradigm
- Constructor
- Static functions
- Methods
- Getters
- Inheritance
- Polymorphism
- Mixin
Popularity of JavaScript
You may underestimate its capabilities but you can't ignore it
JavaScript is most popular
For the sixth year in a row, JavaScript is the most commonly used programming language. Python has risen in the ranks, surpassing C# this year, much like it surpassed PHP last year.
Top 3 are JS Frameworks
ECMAScript New Standards
History of Mocha, Oops JScript, No no JavaScript
| Edition | Released Date |
|---|---|
| 1st Edition | ( June 1997 ) |
| 2nd Edition | ( June 1998 ) |
| 3rd Edition | ( Dec 1999 ) |
| 4th Edition | ( Not released ) |
| 5th Edition | ( Dec 2009 ) |
| 5.1 Edition | ( June 2011 ) |
| 6th Edition "ES2015" | ( June 2015 ) |
| 7th Edition "ES2016" | ( June 2016 ) |
| 8th Edition "ES2017" | ( June 2017 ) |
Variables
- "const" & "let" were introduced in ES2015
- Variables are scoped and doesn't hoist.
- Functions are scoped as well
Lexical "this"
ES2015 introduced:
- Arrow function
- Lexical scoping, so "this" can be passed to child scope of function.
Module
- Functions and variables are now exportable and importable from and to a module respectively
Class
ES2015 introduced support for classes.
Promises
Promises were introduced in ES2015.
Promises are great tool for writing asynchronous non-blocking code.
Async/Await
- async/await were introduced in ES2017
Framework & Architecture
NodeJS
Introduction
- Built on Chrome's V8 JavaScript engine.
- It's single threaded, event-driven and non-blocking I/O model that makes it lightweight and efficient.
- Use "npm" as package ecosystem.
A little Background
Why not everyone writing non blocking IO
- Less support from libraries
- Requires expert knowledge or understanding of event loop.
- "man" pages often don't state whether command will require IO.
How does NodeJS handles IO?
When we should use NodeJS?
- When concurrency is required.
- When there are a lot of IO operations.
- When you know how to delegate a task.
Case Study
- LinkedIn at the beginning of 2010 was facing challenges on performances.
- LinkedIn wanted to scale users with their "Mobile App", But there were limitations.
- Their existing system used "Ruby on Rails (RoR)".
How It Helped
- A lot of mobile application requires API call that makes database call.
- Code simplified and they moved to stateless servers.
- "npm" was added benefit.
- JSON is treated as object.
- Functions are first class citizen.
- No threads so no thread locals
How It Helped
Netflix Case study
- Netflix is one of the world’s largest online media streaming providers
- 7 billion hours of videos to nearly 50 million customers in 60 countries per quarter.
- Earlier Netflix was using Java on server side and javascript on frontend side
How it helped
- Have a common language for both server side and browser side.
- Performance that Node.js offers. From a 40 minute + startup time they went to under a minute
- Node has a lot of modules that are mostly open source. Stopped re-inventing.
- Micro Services with Nodejs keeps the concern separate and brings in high uptime.
They are using
Angular
Introduction
- Angular is the modern day tool for web development
- Have active community around the globe
- We even have a local community for it named "ngPakistan"
- Its a platform that works for all devices
- "TypeScript" is in core.
Features
- Cross Platform
- Speed and Performance
- Productivity Tools
- Development Effort
Speed And Performance
- Auto code generation
- SEO friendly
- Code Splitting, so only sends JavaScript that is needed
Productivity
- Easy Templating
- Angular CLI
- Great IDE Support
Development Story
- Testing is in core
- Animation
- Accessibility
Architecture
ReactJS
Introduction
- A UI Library
- Declarative Views
- Component Based
- Cross Platform
Architecture
Diff Algorithm
