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

03/06/2019 reveal.js

localhost:8000/?print-pdf 1/86

ANGULAR VS REACTANGULAR VS REACTDavid DerichsMohamed HaridyCatherine Mamani VallesOskar Schachtschneider



INHALTSVERZEICHNISINHALTSVERZEICHNISSingle Page ApplicationAngularReactUnterschiede zwischen Angular & ReactLive CodingFazit



SINGLE PAGE APPLICATIONSINGLE PAGE APPLICATION



SINGLE PAGE APPLICATIONSINGLE PAGE APPLICATIONServer liefert eine HTML aus




DOM wird jeweils aktualisiert




DOM wird jeweils aktualisiert

keine Verbindungsprobleme



SINGLE PAGE APPLICATIONSINGLE PAGE APPLICATIONOffline-friendly

Bessere Userexperience



VIELE UNTERNEHMEN BENUTZEN DIESEVIELE UNTERNEHMEN BENUTZEN DIESEGoogle

AmazonFacebookMicroso�



ANGULARANGULAR



KEY FACTSKEY FACTS



KEY FACTSKEY FACTSWeb-Frontend Framework




MVC




MVC

Open Source - MIT Licence




MVC


Angeführt von Google




MVC


Angeführt von Google

TypeScript (Klassen, Typen, Schleifen ...)



RELEVANZRELEVANZ



USPUSP



USPUSPPlatformen (Web, Mobile, Desktop)




Performance durch RxJS





Templating





Templating

Dependency & Package Management



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!'; } }



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; } }



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



REACTREACT



WAS IST REACTWAS IST REACT



WAS IST REACTWAS IST REACTUI Javascript Framework




V in MVC




V in MVC

SINGLE PAGE APPLICATION (SPA)




V in MVC


Entwickelt von facebook 2011




V in MVC



Apache License 2.0 2013




V in MVC



Apache License 2.0 2013

MIT license 2017



BRAUCHE ICH REACT�BRAUCHE ICH REACT�



WER BENUTZT REACTWER BENUTZT REACT




































USPUSP



USPUSPComponents



USPUSPComponents

JSX



USPUSPComponents

JSX

virtual DOM



VIRTUAL DOMVIRTUAL DOM



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



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



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> ) })



UNTERSCHIEDEUNTERSCHIEDEANGULAR & REACTANGULAR & REACT



Philosophie

Zielgruppe



PHILOSOPHIEPHILOSOPHIE

Angular React

Framework Library

erweitertete HTMLversion

JSX, eine XML-artigeSprache



ZIELGRUPPEZIELGRUPPEAngular React

Enterprise Orientiert Web Entwickler Orientiert



Angular React

Skalierte BusinessAnwendungen

Für komplexe UserInteractionen

MVVM Paradigma(MVC) Mehr V als MVC



ANGULARANGULAR



ANGULARANGULARist ein Framework




eingebautes Routing




eingebautes Routing

eingebautes State managment




eingebautes Routing

eingebautes State managment

two-way binding



ANGULARANGULAR



ANGULARANGULARshadow DOM




mit Tests im Sinn gebaut





Native Script





Native Script

Ionic



REACTREACT



REACTREACTist eine Library




erweiterbar durch andere Libraries





Komponenten Basiert





Komponenten Basiert

kein two-way binding



REACTREACT



REACTREACTVirtual DOM




Komponenten inital virtual gerendet, nur bei änderungneu





Seperation zwischen immutable und mutable state





Seperation zwischen immutable und mutable state

React kann leicht zu exisitierenden Applikationhinzugefügt werden



LIVE BEISPIELLIVE BEISPIEL



FAZITFAZIT





beide sind gut



beide sind gut

kommt auf use case an



beide sind gut

kommt auf use case an

größe von Applikation



DANKE FÜR EUREDANKE FÜR EUREAUFMERKSAMKEITAUFMERKSAMKEIT



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

Documents

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