AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

ANGULAR2 vs REACT(简介及框架比较) by 500Tech

发布者 arch
发布于 1458003332240  浏览 4916 关键词 AngularJS, ReactJS, English, 框架 
分享到

第1页

VS



ANGULAR2



REACT



第2页

MEGA

MEETUP



第4页

hackademy.co.il



第5页

Nir Kaufman



Boris Dinkevich



第6页

AGENDA



Round 1

Frameworks Overview

Round 2

Live Coding

Q&A Panel

Prepare Questions



第7页

ROUND 1



ANGULAR2



REACT



第8页

REACT OVERVIEW



第9页

HISTORY

Released in 2013 Production version from day one Dedicated teams at Facebook



第10页

THE BASE

Webpack React Redux Win!



第11页

Game engine



User Todos



Study React



Study Redux



Win!



Root



App



Todos



Add Todo



Todo Todo Todo ………



第12页

THE TWO PROBLEMS

Update the state Update the UI



第13页

VIRTUAL DOM

Only make browser do the changes Never worry about $watch Support super element-heavy pages



第14页

Our code



State



+ React Components



React



Browser DOM



Virtual DOM



Text React Native



etc



第15页

Virtual DOM



<div> <input>



class=‘’



value=‘100’



DOM



<div> <input>



class=‘’



value=‘’



Just a simple diff!



第16页

Update the state…

Once in a galaxy far far away…

MVVC...



第17页

Component



第18页

Service



Service



Component



第19页

Service



Service



Component



Service



第20页

Service Service



Service



Component



Service



第21页

Service



Service Service



Service



Component



Service



第22页

Component



Service Service



Service Service



Service



Component



Service



第23页

Component



Component



Service Model



Service Service



Service Service



Component



Service Service



第24页

MVVC



第25页

User Interface



SStSototroerersess



Dispatcher



UNI-DIRECTIONAL DATA FLOW



第26页

UI IS RENDERED



第27页

UI IS RENDERED SOMETHING HAPPENED



第28页

UI IS RENDERED SOMETHING HAPPENED

STATE CHANGED



第29页

UI IS RENDERED SOMETHING HAPPENED STATE CHANGED

UI IS RENDERED



第30页

UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED STATE CHANGED UI IS RENDERED SOMETHING HAPPENED STATE CHANGED



第31页

FLUX



第32页

Redux

The leader in Flux frameworks One single store of state!



第33页

SINGLE STATE

Easy to re-render Easy to debug Easy to do server rendering



第34页

Current State Action



Reducers

(processors)



Next State



…Event…



Update UI



第35页

TADA! (applause)



第36页

ANGULAR OVERVIEW



第37页

ANGULAR2 IS A NEW FRAMEWORK

- built from scratch to be a development platform - dedicated team at google and around the world - currently in BETA 3



第38页

TARGETING DESKTOP & MOBILE

- Abstract rendering layer - Server side rendering - Natural native-script support



第39页

CUTTING EDGE TECHNOLOGIES

- Use of WebWorkers - Shadow DOM components - server-side pre-rendering, offline compile



第40页

EACH APP IS

UNIQUE



第41页

CHOOSE YOUR TOOLS

- build-tool agnostic: webpack, gulp, grunt etc.. - language support: ES5, ES6, TypeScript, Dart



第42页

CHOOSE YOUR STYLE & DATA FLOW

- Object oriented style: plain classes - Reactive style: RxJS built-in - MV* style: build your data model layer with services - Flux / Redux: uni-direction data-flow



第43页

FLUX



Stores



Components Actions

Dispatcher



第44页

Current State Action



REDUX

Reducers

(processors)



Next State



…Event…



Update UI



第45页

MVC Style



Http Logger

Auth



Model Model Model



Component Component Component



第46页

DEVELOPMENT

PLATFORM



第47页

ALL ASPECTS OF MODERN WEB APPS

- Animation module (js, css & Web animation API) - Internationalization (I18N) & accessibility - Powerful component router - Form system - (two-way data binding, 

change tracking, validation, and error handling)



第48页

ABSTRACTIONS

- Http module for server-side communication - Dependency injection for modularity and testability - Core directives for declarative dynamic templates



第49页

ECOSYSTEM



第50页

REAL WORLD USE



Released 2013 (2+ years) Used extensively in production

https://github.com/facebook/react/ wiki/Sites-Using-React



Beta 3 Released in 2016 currently used in production only inside of Google



第51页

DEVELOPERS



• Massive adoption abroad by startups and companies

• Initial adoption in Israel • Active and growing React community



• Multiple companies started PoC the technology

• Initial adoption in Israel • Community interest exploding



第52页

COMMUNITY



• Active and growing React community • Huge amounts of quality Courses &

Books



• Community interest exploding • official conferences in Europe &

USA • large amount of angular local

communities around the world • massive amount of Books, Videos,

Tutorials, Courses and posts



第56页

ROADMAP



• Gradual small improvements • Easy upgrade path (angular hah!)



• milestones and development process (public)

• tutorials and tools for easier migration from angular 1.x

• dedicate team of 28 google engineers +community contributors



第57页

3RD PARTY



• Extensive eco system • Components for every need



• Growing eco system • Angular 1.x components are

currently in migration process • Easy integration with components

made in other frameworks / libraries



第58页

TECHNICAL



第59页

LANGUAGE



• ES6/7 Focused • TypeScript adding extensive JSX

support



• ES6 / TypeScript focused (ES5 and Dart as well)

• Standart HTML / CSS (reactjQuery1102043735298586587135_1458003381559)



第60页

BUILD TOOLS



• Webpack & Babel



• Webpack /gulp / grunt / etc… • TSC or Babel • Angular CLI (game changer!)



第61页

VIRTUAL / SHADOW DOM



• What is VirtualDOM



• encapsulated structure and style • part of web components spec • exciting technology (not invented..)



第62页

TEMPLATE ENGINES



• JSX - Next slide



• Standart JavaScript - (.js or .ts) • Standard HTML - can be written as

a separate file, valid, (.html) • Standard CSS - can be written as a

separate file, valid (.css) • directives - declarative abstractions,

extends element behaviour. • bind to native element properties

and events - no wrappers!



第63页

JSX

<div> <Component /> <h1>Regular HTML tags</h1> 

 <Hello title=‘React rules!’/> <ComponentWithChildren> <StuffInside /> Some text with { 4 - 3 } expressions in it. </ComponentWithChildren>

</div>



第64页

Components



hello.jsx



const Hello = ({ title }) => <h1>{ title }</h1>;



h1 { font-weight: bold;

}



hello.css



第65页

hello.js

import {Component} from 'angular2/core';  @Component({

selector: 'hello-angular', templateUrl: 'hello.html', styleUrls: ['hello.css'] })  class HelloAngular { . . . }

hello.css

h1 { font-weight: bold;

}

hello.html

<h1>{{ title }}</h1>



第66页

CHANGE DETECTION



• FLUX



• Zone.js - proxy for all the async methods in the browser

• two-way, one-way, one-time binding mechanism

• Flux, RxJS (streaming) and ‘classic’ Model style data flows

• No $digest, $apply, $scope, $watch



第67页

TESTS



• No need for browser • Mocking tools • Build in E2E (click())

(next slide)



• No need for browser • Mocking tools out of the box • Testable from the ground up thanks

to dependency injection



第68页

React Tests

const component = TestUtils.renderIntoDocument( <MyComponent />

);  const button = component

.findRenderedDOMComponentWithTag('button') .getDOMNode();  const label = component .findRenderedDOMComponentWithTag('h1') .getDOMNode();  TestUtils.Simulate.click(button);  expect(label.textContent) .toEqual('I have been clicked!');



第69页

Server Rendering



(next slide)



• Server rendering support (angular universal)

• WebWorker support



第70页

Server rendering

import { render } from ‘react-dom';  render(

<div> <h1>Hello from the server!</h1>

</div>, document.getElementById('app') );

import { renderToString } from ‘react-dom/server';  // Render the component to a string const html = renderToString(

<div> <h1>Hello from the server!</h1>

</div> );



第71页

MOBILE



• React Native • Same code on Android & iOS • Using Native Components! • No crappy WebView wrappers (ionic/

cordova/etc)



• Server side rendering for webmobile

• Natural integration with nativescript (native components, no cordova)



第72页

DEBUGGING



• React Chrome extension • Easy “state” inspection • Great action replay with redux



• redux dev tool for redux • built-in inspection tool • TypeScript support through IDE’s

and sourceMaps



https://github.com/gaearon/redux-devtools



第73页

ROUND 2



ANGULAR2



REACT



第74页

CODE



第75页

Nuth said



FINAL WORDS

Angular is a development platform aimed for modern most demanding web and mobile applications.

Angular2 built from several modules working together to supply high level abstractions and API’s for building complex applications with ease.



第76页

HIRING

We are looking for rockstars to join our band jobs@500tech.com



第77页

Q&A



ANGULAR2



REACT



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。