Introduction to Full Stack JS

Slide 1

Slide 1 text

Intro To Full Stack JS Code Is Fun - 1 September, 2019

Slide 2

Slide 2 text

Randy Vianda Putra, live in Bandung - Lead Frontend Engineer @WorkLifeBeyond - Researcher @evilfactorylabs Hello [email protected] github.com/randyviandaputra @randyvp

Slide 3

Slide 3 text

Agenda - What is Full Stack - What is JavaScript - Why JavaScript - What is Node.js - Why Node.js - What is React - Why React

Slide 4

Slide 4 text

Let’s Start

Slide 5

Slide 5 text

What is Full Stack ?

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

What is JavaScript ? ?

Slide 10

Slide 10 text

What is JavaScript ? ● Programming Language ● JavaScript is a cross-platform ● Object-oriented scripting language used to make webpages interactive (e.g. having complex animations, clickable buttons, popup menus, etc.) ● There are also more advanced server side versions of JavaScript such as Node.js

Slide 11

Slide 11 text

● Supports all modern browsers ● Doesn't support old browsers ● Can use new features in production with conversion to es5

Slide 12

Slide 12 text

Why JavaScript ? ?

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Why JavaScript ? ● Easy to learn ● It's everywhere ● Backend and Frontend ● Learn to Become a Full Stack JavaScript

Slide 15

Slide 15 text

What is Node.js ? ?

Slide 16

Slide 16 text

What is Node.js ? ● Nodejs is a platform for executing JavaScript programs outside the browser. ● Nodejs uses a runtime engine called V8, which is a JavaScript runtime engine from Google Chrome. ● Server Side JavaScript

Slide 17

Slide 17 text

Why Node.js ? ?

Slide 18

Slide 18 text

Why Node.js ? ● Easy to learn ● Full Stack JS ● Open source ● Very reliable and often used to develop real-time applications

Slide 19

Slide 19 text

What is React ? ?

Slide 20

Slide 20 text

What is React ? A JavaScript Library for building UI (User Interfaces), not a framework like Backbone, Angular etc, the V in MVC

Slide 21

Slide 21 text

Who’s using React ? ?

Slide 22

Slide 22 text

Who’s using React ?

Slide 23

Slide 23 text

Concept of React ? ?

Slide 24

Slide 24 text

Concept of React ? Component Virtual DOM JSX One Way DataFlow

Slide 25

Slide 25 text

Component ? ?

Slide 26

Slide 26 text

Build Component, not template

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Virtual DOM ? ?

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

JSX ? ?

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Controller View

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

https:/ /babeljs.io

Slide 35

Slide 35 text

One Way DataFlow ? ?

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Why React ? ?

Slide 38

Slide 38 text

“ LEARN ONCE, WRITE ANYWHERE 38

Slide 39

Slide 39 text

“ VIRTUAL DOM IS CRAZY FAST! Makes re-rendering on every change fast 39

Slide 40

Slide 40 text

“ Component Based Is the future of web development 40

Slide 41

Slide 41 text

“ React dev tools React Chrome extension make debugging so much easier 41

Slide 42

Slide 42 text

“ Easy to read and understand views 42

Slide 43

Slide 43 text

“ Facebook are maintaining this project 43

Slide 44

Slide 44 text

https:/ /github.com/adam-golab/react-developer-roadmap

Slide 45

Slide 45 text

Install React $ npm install -g create-react-app $ create-react-app project_name

Slide 46

Slide 46 text

Fundamentals React ?

Slide 47

Slide 47 text

Component Stateless (function) Statefull (class) Represent a piece of UI

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Props - Passed down to component from parent component and represents data for the component - accessed via this.props

Slide 50

Slide 50 text

State - Represents internal state of the component - Accessed via this.state - When a component's state data changes, the rendered markup will be updated by re-invoking render() method

Slide 51

Slide 51 text

Links - https:/ /reactjs.org - https:/ /developer.mozilla.org/id/docs/Web/JavaScript - https:/ /nodejs.org/api/ - https:/ /www.youtube.com/user/TechGuyWeb

Slide 52

Slide 52 text

“ “Whatever programming language you choose, I wish you luck in the beautiful world of JavaScript.”