New Face of JavaScript

Speaker

Muhammad Faizan

JavaScript Developer @ Daraz

https://github.com/muhammadfaizan

https://stackoverflow.com/users/3098395/muhammad-faizan

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

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

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