1 of 28

HOW TO LEARN MODERN JAVASCRIPT

DILO - 23 Sept 2020

Advert keynote presentation - 2015

2 of 28

NUSENDRA HANGGARAWAN

​

Freelance Web Developer

Core Organizer SurabayaJS

Advert keynote presentation - 2015

3 of 28

Advert keynote presentation - 2015

4 of 28

TOP Programming Languages

https://octoverse.github.com/

Advert keynote presentation - 2015

5 of 28

TOP Programming Languages

https://githut.info/

Advert keynote presentation - 2015

6 of 28

TOP Programming Languages

https://githut.info/

Advert keynote presentation - 2015

7 of 28

TOP Programming Languages

https://adtmag.com/articles/2015/08/20/github-languages.aspx

Advert keynote presentation - 2015

8 of 28

TOP Programming Languages

https://adtmag.com/articles/2015/08/20/github-languages.aspx

Advert keynote presentation - 2015

9 of 28

TOP Programming Languages

https://www.benfrederickson.com/ranking-programming-languages-by-github-users/

Advert keynote presentation - 2015

10 of 28

TOP Programming Languages

https://www.benfrederickson.com/ranking-programming-languages-by-github-users/

Advert keynote presentation - 2015

11 of 28

TOP Programming Languages

https://www.benfrederickson.com/ranking-programming-languages-by-github-users/

Advert keynote presentation - 2015

12 of 28

What is Modern JS ?

JQuery → React, Vue, Angular

JS for backend

​

Express, Koa, Fastify, Hapi ….

JS for Mobile App

​

React Native, NativeScript, Weex

JS for Machine Learning

​

Tensorflow

Desktop

​

Electron

Advert keynote presentation - 2015

13 of 28

JS Ecosystems

Advert keynote presentation - 2015

14 of 28

Advert keynote presentation - 2015

15 of 28

App Lifecycle

App Code

Compilation

Webserver

Browser

Advert keynote presentation - 2015

16 of 28

App Code

  1. JavaScript Flavors (TS, ES6, Coffee, Vanilla)
  2. Frontend Tools (JQuery, React, Vue, Angular, Svelte, dll)
  3. Package Management (NPM, Yarn, Bower)
  4. Module Systems (ES6 Module, Require)
  5. Core (Deno / Nodejs)

Advert keynote presentation - 2015

17 of 28

Compilation

  • JavaScript Flavors (TS, ES6, Coffee)
  • Module Bundler (Webpack, Parcel, Rollup, dll)

Advert keynote presentation - 2015

18 of 28

Webserver

  • Backend (Express, Fastify, Koa, Nest, dll)
  • Websocket (Socket.io)

Advert keynote presentation - 2015

19 of 28

Client Browser

  • Firefox
  • Chrome
  • dll

Advert keynote presentation - 2015

20 of 28

Advert keynote presentation - 2015

21 of 28

FUNDAMENTAL !!

Advert keynote presentation - 2015

22 of 28

Then what?

  • Node.js
  • ES6
  • Try one of these frameworks (Express / Koa / Hapi, etc)
  • Choose one of these monster framework (Vue / React / Angular)
  • JS flavors anyone? (TypeScript, REasonml)

Advert keynote presentation - 2015

23 of 28

EcmaScript (ES6 / ES2015)

Advert keynote presentation - 2015

24 of 28

// ES5

var x = function(x, y) {

return x * y;

}

​

// ES6

const x = (x, y) => x * y;

// old

var

function

​

// ES6

let & const

class

Advert keynote presentation - 2015

25 of 28

How to learn JS?

  • Start with an online course
  • Practice completing JS exercises & challenges (topcoder, hackerrank, dll)
  • SurabayaJS Webinar :D
  • Start writing your code as soon as possible
  • Build something (eg. Blog)
  • Practice
  • Practice
  • Practice
  • Practice
  • Practice
  • Practice
  • Practice

Advert keynote presentation - 2015

26 of 28

Advert keynote presentation - 2015

27 of 28

Advert keynote presentation - 2015

28 of 28

Advert keynote presentation - 2015