ANGULAR VS REACT -  · 2019-06-06 · 03/06/2019 reveal.js localhost:8000/?print-pdf 1/ 86 ANGULAR VS REACT David Derichs Mohamed Haridy Catherine Mamani Valles Oskar Schachtschneider

Post on 21-May-2020

9 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

Transcript

03/06/2019 reveal.js

localhost:8000/?print-pdf 1/86

ANGULAR VS REACTANGULAR VS REACTDavid DerichsMohamed HaridyCatherine Mamani VallesOskar Schachtschneider

03/06/2019 reveal.js

localhost:8000/?print-pdf 2/86

INHALTSVERZEICHNISINHALTSVERZEICHNISSingle Page ApplicationAngularReactUnterschiede zwischen Angular & ReactLive CodingFazit

03/06/2019 reveal.js

localhost:8000/?print-pdf 3/86

SINGLE PAGE APPLICATIONSINGLE PAGE APPLICATION

03/06/2019 reveal.js

localhost:8000/?print-pdf 4/86

SINGLE PAGE APPLICATIONSINGLE PAGE APPLICATIONServer liefert eine HTML aus

03/06/2019 reveal.js

localhost:8000/?print-pdf 5/86

SINGLE PAGE APPLICATIONSINGLE PAGE APPLICATIONServer liefert eine HTML aus

DOM wird jeweils aktualisiert

03/06/2019 reveal.js

localhost:8000/?print-pdf 6/86

SINGLE PAGE APPLICATIONSINGLE PAGE APPLICATIONServer liefert eine HTML aus

DOM wird jeweils aktualisiert

keine Verbindungsprobleme

03/06/2019 reveal.js

localhost:8000/?print-pdf 7/86

SINGLE PAGE APPLICATIONSINGLE PAGE APPLICATIONOffline-friendly

Bessere Userexperience

03/06/2019 reveal.js

localhost:8000/?print-pdf 8/86

VIELE UNTERNEHMEN BENUTZEN DIESEVIELE UNTERNEHMEN BENUTZEN DIESEGoogle

AmazonFacebookMicroso�

03/06/2019 reveal.js

localhost:8000/?print-pdf 9/86

ANGULARANGULAR

03/06/2019 reveal.js

localhost:8000/?print-pdf 10/86

KEY FACTSKEY FACTS

03/06/2019 reveal.js

localhost:8000/?print-pdf 11/86

KEY FACTSKEY FACTSWeb-Frontend Framework

03/06/2019 reveal.js

localhost:8000/?print-pdf 12/86

KEY FACTSKEY FACTSWeb-Frontend Framework

MVC

03/06/2019 reveal.js

localhost:8000/?print-pdf 13/86

KEY FACTSKEY FACTSWeb-Frontend Framework

MVC

Open Source - MIT Licence

03/06/2019 reveal.js

localhost:8000/?print-pdf 14/86

KEY FACTSKEY FACTSWeb-Frontend Framework

MVC

Open Source - MIT Licence

Angeführt von Google

03/06/2019 reveal.js

localhost:8000/?print-pdf 15/86

KEY FACTSKEY FACTSWeb-Frontend Framework

MVC

Open Source - MIT Licence

Angeführt von Google

TypeScript (Klassen, Typen, Schleifen ...)

03/06/2019 reveal.js

localhost:8000/?print-pdf 16/86

RELEVANZRELEVANZ

03/06/2019 reveal.js

localhost:8000/?print-pdf 17/86

USPUSP

03/06/2019 reveal.js

localhost:8000/?print-pdf 18/86

USPUSPPlatformen (Web, Mobile, Desktop)

03/06/2019 reveal.js

localhost:8000/?print-pdf 19/86

USPUSPPlatformen (Web, Mobile, Desktop)

Performance durch RxJS

03/06/2019 reveal.js

localhost:8000/?print-pdf 20/86

USPUSPPlatformen (Web, Mobile, Desktop)

Performance durch RxJS

Templating

03/06/2019 reveal.js

localhost:8000/?print-pdf 21/86

USPUSPPlatformen (Web, Mobile, Desktop)

Performance durch RxJS

Templating

Dependency & Package Management

03/06/2019 reveal.js

localhost:8000/?print-pdf 22/86

EVENT BINDINGEVENT BINDING <button (click)="onClickMe()">Click me!</button> @Component({ selector: 'app-click-me', template: ` <button (click)="onClickMe()">Click me!</button> {{clickMessage}}` }) export class ClickMeComponent { clickMessage = ''; onClickMe() { this.clickMessage = 'You are my hero!'; } }

03/06/2019 reveal.js

localhost:8000/?print-pdf 23/86

DATA BINDINGSDATA BINDINGS <element [ngclass]="{'aktiv': this.data.aktiv }">...</element> <button (click)="toggle()"></button> <element" *ngif="data.aktiv"> {{ beispieltext }} </element"> export class AppComponent { data = { aktiv: true; } text = 'beispieltext'; toggle(){ this.data.aktiv = false; } }

03/06/2019 reveal.js

localhost:8000/?print-pdf 24/86

SCHLEIFENSCHLEIFEN <li *ngfor="let movie of movies"> {{ movie }} </li> export class AppComponent { movies = ['Captain America', 'Iron Man', 'Hulk']; singleMovie = this.movies[0]; }

03/06/2019 reveal.js

localhost:8000/?print-pdf 25/86

REACTREACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 26/86

WAS IST REACTWAS IST REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 27/86

WAS IST REACTWAS IST REACTUI Javascript Framework

03/06/2019 reveal.js

localhost:8000/?print-pdf 28/86

WAS IST REACTWAS IST REACTUI Javascript Framework

V in MVC

03/06/2019 reveal.js

localhost:8000/?print-pdf 29/86

WAS IST REACTWAS IST REACTUI Javascript Framework

V in MVC

SINGLE PAGE APPLICATION (SPA)

03/06/2019 reveal.js

localhost:8000/?print-pdf 30/86

WAS IST REACTWAS IST REACTUI Javascript Framework

V in MVC

SINGLE PAGE APPLICATION (SPA)

Entwickelt von facebook 2011

03/06/2019 reveal.js

localhost:8000/?print-pdf 31/86

WAS IST REACTWAS IST REACTUI Javascript Framework

V in MVC

SINGLE PAGE APPLICATION (SPA)

Entwickelt von facebook 2011

Apache License 2.0 2013

03/06/2019 reveal.js

localhost:8000/?print-pdf 32/86

WAS IST REACTWAS IST REACTUI Javascript Framework

V in MVC

SINGLE PAGE APPLICATION (SPA)

Entwickelt von facebook 2011

Apache License 2.0 2013

MIT license 2017

03/06/2019 reveal.js

localhost:8000/?print-pdf 33/86

BRAUCHE ICH REACT�BRAUCHE ICH REACT�

03/06/2019 reveal.js

localhost:8000/?print-pdf 34/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 35/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 36/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 37/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 38/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 39/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 40/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 41/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 42/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 43/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 44/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 45/86

WER BENUTZT REACTWER BENUTZT REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 46/86

USPUSP

03/06/2019 reveal.js

localhost:8000/?print-pdf 47/86

USPUSPComponents

03/06/2019 reveal.js

localhost:8000/?print-pdf 48/86

USPUSPComponents

JSX

03/06/2019 reveal.js

localhost:8000/?print-pdf 49/86

USPUSPComponents

JSX

virtual DOM

03/06/2019 reveal.js

localhost:8000/?print-pdf 50/86

VIRTUAL DOMVIRTUAL DOM

03/06/2019 reveal.js

localhost:8000/?print-pdf 51/86

EVENT BINDINGEVENT BINDING <button onclick="{this.handclick}">Clik me!</button> handleclick = (num) => {console.log(num)}

03/06/2019 reveal.js

localhost:8000/?print-pdf 52/86

DATA BINDINGDATA BINDING state = { defaultNumber: 1, selectedCounter: 0 } {this.setState({ selectedNumber: 5 })}

03/06/2019 reveal.js

localhost:8000/?print-pdf 53/86

SCHLEIFENSCHLEIFEN let list = [1, 2, 3, 4, 5, 6] list.map((number) => { console.log(number) return ( <react.fragment> <button onclick="{this.handleclick}">Click me!</button> {this.setState({ selectedNumber: 5 })} <div> {number}</div> </react.fragment> ) })

03/06/2019 reveal.js

localhost:8000/?print-pdf 54/86

UNTERSCHIEDEUNTERSCHIEDEANGULAR & REACTANGULAR & REACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 55/86

Philosophie

Zielgruppe

03/06/2019 reveal.js

localhost:8000/?print-pdf 56/86

PHILOSOPHIEPHILOSOPHIE 

Angular React

Framework Library

erweitertete HTMLversion

JSX, eine XML-artigeSprache

03/06/2019 reveal.js

localhost:8000/?print-pdf 57/86

ZIELGRUPPEZIELGRUPPEAngular React

Enterprise Orientiert Web Entwickler Orientiert

03/06/2019 reveal.js

localhost:8000/?print-pdf 58/86

Angular React

Skalierte BusinessAnwendungen

Für komplexe UserInteractionen

MVVM Paradigma(MVC) Mehr V als MVC

03/06/2019 reveal.js

localhost:8000/?print-pdf 59/86

ANGULARANGULAR

03/06/2019 reveal.js

localhost:8000/?print-pdf 60/86

ANGULARANGULARist ein Framework

03/06/2019 reveal.js

localhost:8000/?print-pdf 61/86

ANGULARANGULARist ein Framework

eingebautes Routing

03/06/2019 reveal.js

localhost:8000/?print-pdf 62/86

ANGULARANGULARist ein Framework

eingebautes Routing

eingebautes State managment

03/06/2019 reveal.js

localhost:8000/?print-pdf 63/86

ANGULARANGULARist ein Framework

eingebautes Routing

eingebautes State managment

two-way binding

03/06/2019 reveal.js

localhost:8000/?print-pdf 64/86

ANGULARANGULAR

03/06/2019 reveal.js

localhost:8000/?print-pdf 65/86

ANGULARANGULARshadow DOM

03/06/2019 reveal.js

localhost:8000/?print-pdf 66/86

ANGULARANGULARshadow DOM

mit Tests im Sinn gebaut

03/06/2019 reveal.js

localhost:8000/?print-pdf 67/86

ANGULARANGULARshadow DOM

mit Tests im Sinn gebaut

Native Script

03/06/2019 reveal.js

localhost:8000/?print-pdf 68/86

ANGULARANGULARshadow DOM

mit Tests im Sinn gebaut

Native Script

Ionic

03/06/2019 reveal.js

localhost:8000/?print-pdf 69/86

REACTREACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 70/86

REACTREACTist eine Library

03/06/2019 reveal.js

localhost:8000/?print-pdf 71/86

REACTREACTist eine Library

erweiterbar durch andere Libraries

03/06/2019 reveal.js

localhost:8000/?print-pdf 72/86

REACTREACTist eine Library

erweiterbar durch andere Libraries

Komponenten Basiert

03/06/2019 reveal.js

localhost:8000/?print-pdf 73/86

REACTREACTist eine Library

erweiterbar durch andere Libraries

Komponenten Basiert

kein two-way binding

03/06/2019 reveal.js

localhost:8000/?print-pdf 74/86

REACTREACT

03/06/2019 reveal.js

localhost:8000/?print-pdf 75/86

REACTREACTVirtual DOM

03/06/2019 reveal.js

localhost:8000/?print-pdf 76/86

REACTREACTVirtual DOM

Komponenten inital virtual gerendet, nur bei änderungneu

03/06/2019 reveal.js

localhost:8000/?print-pdf 77/86

REACTREACTVirtual DOM

Komponenten inital virtual gerendet, nur bei änderungneu

Seperation zwischen immutable und mutable state

03/06/2019 reveal.js

localhost:8000/?print-pdf 78/86

REACTREACTVirtual DOM

Komponenten inital virtual gerendet, nur bei änderungneu

Seperation zwischen immutable und mutable state

React kann leicht zu exisitierenden Applikationhinzugefügt werden

03/06/2019 reveal.js

localhost:8000/?print-pdf 79/86

LIVE BEISPIELLIVE BEISPIEL

03/06/2019 reveal.js

localhost:8000/?print-pdf 80/86

FAZITFAZIT

03/06/2019 reveal.js

localhost:8000/?print-pdf 81/86

03/06/2019 reveal.js

localhost:8000/?print-pdf 82/86

beide sind gut

03/06/2019 reveal.js

localhost:8000/?print-pdf 83/86

beide sind gut

kommt auf use case an

03/06/2019 reveal.js

localhost:8000/?print-pdf 84/86

beide sind gut

kommt auf use case an

größe von Applikation

03/06/2019 reveal.js

localhost:8000/?print-pdf 85/86

DANKE FÜR EUREDANKE FÜR EUREAUFMERKSAMKEITAUFMERKSAMKEIT

03/06/2019 reveal.js

localhost:8000/?print-pdf 86/86

LINKSLINKShttps://reactjs.org/docs/getting-started.htmlhttps://angular.io/guide/quickstart

top related

OGUZ GELAL · using Ionic, Ionic 2, Angular.js, Angular...
Documents
Transitioning Angular 2 User Interface (UI) into React ·.....
Documents
From Angular to React Dev Tools(browser extension) Coding...
Documents
Angular vs React: Building modern SharePoint interfaces with...
Software
MADHAV ANADKAT...
Documents
Angular JS 2.0 & React with Kendo UI
Technology
Combining Angular and React Together
Internet
React -...
Documents
Secure Authentication for Web Applications€¦ · •The.....
Documents
Angular to React Moda Jovem: Moving from · Better speed...
Documents
Angular 2 vs React. What to chose in 2017?
Engineering
Vue - Smart Data · 2019-06-19 · Vue vs React Redux can.....
Documents
Why I Left Angular for React - SDD Conference · React Hey....
Documents
Angular vs React Industry Trends · React is popular and...
Documents
Which should I learn — Angular 2 or React?
Technology
react - GitHub Pages · -Angular 2.0 was completely...
Documents