Frontend Frameworks Introduction Speakers Lee Byron Rob Wormald - - PowerPoint PPT Presentation

▶
frontend frameworks
SMART_READER_LITE
LIVE PREVIEW

Frontend Frameworks Introduction Speakers Lee Byron Rob Wormald - - PowerPoint PPT Presentation

Feb 06, 2024 248 likes •1.34k views

Frontend Frameworks Introduction Speakers Lee Byron Rob Wormald Taras Mankovski React Core Team @ Facebook Angular Core Team @ Google Ember Contrib @ EmberSherpa @leeb @robwormald @tarasm Started at Facebook in 2012 Created by Jordan

slide-1
SLIDE 1

Frontend Frameworks

Introduction

slide-2
SLIDE 2

Speakers

Lee Byron React Core Team @ Facebook @leeb Rob Wormald Angular Core Team @ Google @robwormald Taras Mankovski Ember Contrib @ EmberSherpa @tarasm

slide-3
SLIDE 3
slide-4
SLIDE 4

Started at Facebook in 2012

slide-5
SLIDE 5

Created by Jordan Walke

slide-6
SLIDE 6

Used for Comments, Chat, Notifications, and Instagram

slide-7
SLIDE 7

Release Date: May 26, 2013 Contributors: 846 License: BSD

slide-8
SLIDE 8
slide-9
SLIDE 9

React is different in many ways

slide-10
SLIDE 10

Three primary differences

slide-11
SLIDE 11
  • 1. React is not MVC
slide-12
SLIDE 12

MVC MVVM MVW

slide-13
SLIDE 13

Models

slide-14
SLIDE 14

Mutative Models

slide-15
SLIDE 15

Mutative Models

slide-16
SLIDE 16

React is The “V” in MVC?

slide-17
SLIDE 17

React is Component-based UI

slide-18
SLIDE 18
slide-19
SLIDE 19

Just JavaScript

slide-20
SLIDE 20

Templates

slide-21
SLIDE 21
slide-22
SLIDE 22
slide-23
SLIDE 23

Kinda miss those Templates...

slide-24
SLIDE 24

JSX

A Syntax Extension to JavaScript

slide-25
SLIDE 25
slide-26
SLIDE 26
slide-27
SLIDE 27

Something changed? Re-render everything!

slide-28
SLIDE 28

Won’t that be slow?

slide-29
SLIDE 29

Reconcile

Diff previous view and next view

slide-30
SLIDE 30
slide-31
SLIDE 31

// Imperative view operations setProp(prev2, "class", "newValue") removeElement(prev6) addChild(prev4, next1) addChild(prev4, next2)

slide-32
SLIDE 32

Quite fast

slide-33
SLIDE 33
  • 2. React is for UIs, not Web Apps
slide-34
SLIDE 34

HTML

slide-35
SLIDE 35

HTML

slide-36
SLIDE 36

Component: (Data) => Element

slide-37
SLIDE 37

Element: Type Attributes Children

slide-38
SLIDE 38

Elements DOM HTML UI Browser Server

slide-39
SLIDE 39

Elements DOM HTML UIView Android.View UI Browser Server iOS Apps Android Apps

slide-40
SLIDE 40

Elements DOM HTML UIView Android.View 3D Scene Graph UI Browser Server iOS Apps Android Apps Virtual Reality

slide-41
SLIDE 41

Elements DOM HTML UIView Android.View 3D Scene Graph React React DOM React Native React VR

slide-42
SLIDE 42
  • 3. React is adopted incrementally
slide-43
SLIDE 43

Great for whole applications

slide-44
SLIDE 44

Or small portions of the screen

slide-45
SLIDE 45
slide-46
SLIDE 46

Introduce React “Bottom up”

slide-47
SLIDE 47

Lifecycle Hooks:

componentDidMount() componentWillReceiveProps() componentWillUnmount()

slide-48
SLIDE 48

React’s “Escape Hatch”

slide-49
SLIDE 49

Use your existing frameworks and code with React

slide-50
SLIDE 50
  • 1. React is not MVC

Component-based UI with functions instead of templates.

  • 2. React is for UIs, not Web Apps

Elements model web, native apps, and VR.

  • 3. React is adopted incrementally

Small areas bottom up, and escape hatch to use existing code.

slide-51
SLIDE 51
  • 1. React is not MVC

Component-based UI with functions instead of templates.

  • 2. React is for UIs, not Web Apps

Elements model web, native apps, and VR.

  • 3. React is adopted incrementally

Small areas bottom up, and escape hatch to use existing code.

  • 4. React has a great community

Who provide education, tools, libraries, and services.

slide-52
SLIDE 52
slide-53
SLIDE 53

Release Date: September 14, 2014 Contributors: 357 License: MIT

slide-54
SLIDE 54

Angular 1

slide-55
SLIDE 55

Angular 2

slide-56
SLIDE 56

Component Architecture

slide-57
SLIDE 57

Application Composition

APP COMPONENT PRODUCT COMPONENTS SALE COMPONENT NAV COMPONENT

slide-58
SLIDE 58

Application Composition

PRODUCT COMPONENT BUTTON COMPONENT

slide-59
SLIDE 59

Application Composition

APP COMPONENT PRODUCT COMPONENTS SALE COMPONENT NAV COMPONENT BUTTON COMPONENTS

slide-60
SLIDE 60

Components

=

HTML < >

+

Class { }

Metadata

CSS [ ]

+

slide-61
SLIDE 61

app/hero-list.component.html

<h2>Hero List</h2> <p><em>Pick a hero from the list</em></p> <ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> </ul> <hero-detail *ngIf="selectedHero" [hero]="selectedHero></hero-detail>

Templates

HTML

Standard HTML

Angular 2 Templates: Will It Parse?

slide-62
SLIDE 62

app/hero-list.component.html

… <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> … <hero-detail *ngIf="selectedHero" [hero]="selectedHero></hero-detail>

Templates

{{expression}} [propertyName] = “expression” (eventName) = “statement” [(ngModel)] = “property”

DOM Component

Interpolation One Way Binding Event Binding Two Way Binding

HTML Property & Event Binding

slide-63
SLIDE 63

Structural Attribute

HTML Property & Event Binding Directives

app/hero-list.component.html

… <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> … <hero-detail *ngIf="selectedHero" [hero]="selectedHero></hero-detail>

app/hero-detail.component.html

<input [(ngModel)]="hero.name">

Templates

slide-64
SLIDE 64

Templates

HTML Property & Event Binding Directives Component

Component Class

app/hero-list.component.html <h2>Hero List</h2> <p><em>Pick a hero from the list</em></p> <ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> </ul>

app/hero-list.component.ts

export class HeroListComponent implements OnInit { heroes: Hero[]; selectedHero: Hero; constructor (private service: HeroService) { } ngOnInit() { this.heroes = this.service.getHeroes(); } selectHero(hero: Hero) { this.selectedHero = hero; } }
slide-65
SLIDE 65

Component Architecture Just A Class

Service Composition

app/hero.service.ts

@Injectable() export class HeroService { constructor ( private http: Http, private errorHandler: HttpErrorHandler) { } getHeroes () { return this.http.get('app/heroes') .map(res => res.json().data) .catch(this.errorHandler.handle); } }

slide-66
SLIDE 66

Component Architecture Injector

Service Composition Dependency Injection

app/hero-list.component.html

constructor( private heroService: HeroService ) { }

CrisisService HeroService PowerService VillianService

slide-67
SLIDE 67

Injector

CrisisService HeroService PowerService VillianService

Component Architecture

Service Composition Dependency Injection

app/hero-list.component.html

constructor( private heroService: HeroService ) { }

slide-68
SLIDE 68

Injector

CrisisService HeroService PowerService VillianService

app/hero-list.component.html

constructor( private heroService: HeroService, private powerService: PowerService ) { }

Component Architecture

Service Composition Dependency Injection

slide-69
SLIDE 69

Component Architecture

Service Composition Dependency Injection Routing

app/app.module.ts

@NgModule({ imports: [ RouterModule.forRoot([ { path: 'crisis-center', component: CrisisListComponent }, { path: 'heroes', component: HeroListComponent } ]) … ], … };

slide-70
SLIDE 70

app/app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <h1>Angular Router</h1> <nav> <a routerLink="/crisis-center">Crisis Center</a> <a routerLink="/heroes">Heroes</a> </nav> <router-outlet></router-outlet> ` }) export class AppComponent {}

Component Architecture

Service Composition Dependency Injection Routing

slide-71
SLIDE 71

Component Architecture

Service Composition Dependency Injection Routing

slide-72
SLIDE 72

Angular Everywhere

slide-73
SLIDE 73

Scenarios

Progressive Web Apps Mobile Desktop

PWA

slide-74
SLIDE 74

Server Scenarios

slide-75
SLIDE 75

Server Scenarios

slide-76
SLIDE 76

TypeScript

Superset of Javascript Because Types!! Readability Familiarity Tooling

slide-77
SLIDE 77

HTML CSS JavaScript Template Compiler Change Detection Renderer DI Runtime View Runtime Change detection Runtime

Angular 1: Interpreted Templates

slide-78
SLIDE 78

HTML CSS JavaScript Compiler Views

Angular 2: Compiler Generates Code

slide-79
SLIDE 79

HTML CSS JavaScript JIT Compiler Views

Just In Time (JIT) Compilation

slide-80
SLIDE 80

Optimized for JavaScript Virtual Machines

Just In Time (JIT) Compilation

Change detection 10x faster!

slide-81
SLIDE 81

Angular 2 Compiler Perf Improvement

1.5 4.5 3 6 Ratio Angular 2 1.5 Angular 1 5.7 By Hand 1.0

Deep tree benchmark

slide-82
SLIDE 82

Build Step HTML CSS JavaScript AoT Compiler Views

Ahead of Time (AoT) Compilation

slide-83
SLIDE 83

Optimized for JavaScript Virtual Machines

Ahead of Time (AoT) Compilation

No in-browser parsing

  • r compilation

Ship less code

slide-84
SLIDE 84

JIT vs AOT Compilation - Page Load Performance

100 300 200 400 Load time (ms) 335 130 Size (kb, gzipped) 144 49

JIT AoT Deep tree benchmark

slide-85
SLIDE 85

Angular 2 editor Legacy editor AOT compiler

Ahead-of-time template compiler

slide-86
SLIDE 86

AOT compiler Closure advanced compilation 27KB Hello World App!

Ahead-of-time template compiler

Angular 2 editor Legacy editor

slide-87
SLIDE 87
slide-88
SLIDE 88

Release Date: December 8, 2011 Contributors: 620 License: MIT

slide-89
SLIDE 89

Created by Yehuda Katz and Tom Dale

slide-90
SLIDE 90

Based on SproutCore

slide-91
SLIDE 91

A framework for building ambitious web applications.

slide-92
SLIDE 92
  • created by many people
  • maintained for a long time
  • upgraded not rewritten

ambitious web applications

slide-93
SLIDE 93

✅ Routing ✅ Component Architecture ✅ DOM Diffing ✅ One Way & Two Way Property binding ✅ HTML Templating ✅ Service Composition

Features

slide-94
SLIDE 94

3 biggest strengths

slide-95
SLIDE 95
  • 1. Framework for large applications
slide-96
SLIDE 96
  • Participate in TC39
  • Polyfill new features
  • Provide feedback

Contributing to web standards

slide-97
SLIDE 97
  • Introduced 1st class URL based routing
  • Introduced CLI development environment
  • Adopted unidirectional data flow and re-render

everything from React

Contributing and adopting good ideas

slide-98
SLIDE 98
  • Strict adherence to Semantic Versioning
  • 6 week releases for early adopters
  • LTS releases for slower adopters
  • Guide upgrades with deprecation warnings

Predictable Upgrade Path

slide-99
SLIDE 99
  • 2. Mature Ecosystem
slide-100
SLIDE 100

Supported by many companies

slide-101
SLIDE 101
  • Ease integration
  • Complete solutions
  • Primitives
  • Experimental & Deprecated features

3000+ addons

slide-102
SLIDE 102
  • 3. Comprehensive Tooling
slide-103
SLIDE 103
  • Standard development environment
  • Codifies conventions
  • Common build process

Ember CLI

slide-104
SLIDE 104
  • Server side rendering
  • Speed up initial render
  • Node.js server

Ember FastBoot

slide-105
SLIDE 105
  • Big app = many small apps
  • Apps are addons
  • Lazy load support

Ember Engines

slide-106
SLIDE 106

ADOPT If you are faced with building a single-page application (SPA) and trying to choose a framework to build with, Ember.js has emerged as a leading choice.... The Ember CLI build tooling is a haven in the storm of JavaScript build tools, and the Ember core team and community are highly active and responsive. https://www.thoughtworks.com/radar/languages-and-frameworks/ember-js

slide-107
SLIDE 107

Frontend Frameworks

Panel Discussion