Angular 5 Vs
Total Page:16
File Type:pdf, Size:1020Kb
Layout: Titelfolie Einsatz: Für den Titel einer Präsentation Inhalt: Haupttitel, Untertitel, Referent Tipps: / Angular 5 vs. React When to Choose Which? Stephan Rauh Dr. Marius Hofmeister OPITZ CONSULTING Deutschland GmbH © OPITZ CONSULTING 2017 Hinweis MKTG: © OPITZ CONSULTING 2017 Die Jahreszahl muss hier und auf der Toplevel Masterfolie OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 ggf. pro Jahr angepasst werden! Layout: Teiltrenner Einsatz: Für die Abtrennung von Kapiteln Inhalt: Überschrift des Teils/Kapitels Tipps: Optional sind hier Detail-Inhaltsangaben mögl. Setting the Stage https://upload.wikimedia.org/wikipedia/commons/5/52/Summer_Solstice_Sunrise_over_Stonehenge_2005.jpg © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 2 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Seite 2 Layout: Titel & 2 Inhalte Einsatz: Standardfolie Inhalt: Überschrift, 2 variable Inhalte Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich too What People Say About Angular enterprisy great two-way tooling update binding hell considered opinionated bad complicated great Angular is But it's productivity slow TypeScript! dependency injection is broken mediocre Angular is dependency productivity fast hell © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 3 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 2 Inhalte Einsatz: Standardfolie Inhalt: Überschrift, 2 variable Inhalte Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich limited What People Say About React.js editor support great tooling fast unidirectional data flow flexible small easy to footprint learn great It's simple productivity requires JavaScript! I can use TDD any library I want mediocre integrates difficult to productivity everywhere set up © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 4 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 2 Inhalte Einsatz: Standardfolie Inhalt: Überschrift, 2 variable Inhalte Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich Image source: https://pixabay.com/de/hier-entlang-verwirren-718660/, https://angular.io/presskit, https://en.wikipedia.org/wiki/File:React-icon.svg © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 5 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich What's Going On? Different target audiences Web developers vs. enterprise developers Different use cases Interactive web pages Web shops Back-office processing Internet vs intranet Image source: https://pixabay.com/de/online-speicher-gesch%C3%A4ft-kaufen-1905889/ © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 6 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich History 101: AngularJS 1.x Combined ideas from Backbone, Knockout, Web Components spec Made MVVM popular in the browser Declarative programming style Got rid of DOM manipulations Added dependency injection to JavaScript Brought custom components © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 7 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich History 101: Migration to Angular 2+ AngularJS had a couple of issues Painful migration to Angular 2+ Many breaking changes of ng2 In the beta versions! Frustrated developers left © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 8 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich Angular 5? Angular 2+ comes with strong improvements Angular 3 has been skipped because there's already version 3 of the router Angular 4 contains two minor breaking changes Angular 5 (23.10.) contains changes concerning performance and usability © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 9 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich History 101: React.js Features Virtual DOM Unidirectional data flow Transactional state (Redux) JSX Powerful toolchain "React was transformational because it singlehandedly made MVC seem like obsolete tech & unleashed unidirectional flow on the masses.“ – Eric Elliot © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 10 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich Contemporary History http://isfiberreadyyet.com/ React has been re-written from Scratch (Fiber) Suitability for animation, layout, and gestures Main feature incremental rendering Less resources required Fully downward compatible New contender: Vue.js “less opinionated” © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 11 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Teiltrenner Einsatz: Für die Abtrennung von Kapiteln Inhalt: Überschrift des Teils/Kapitels Tipps: Optional sind hier Detail-Inhaltsangaben mögl. 2 Image source: https://pixabay.com/de/%C3%A4pfel-kiwi-orangen-obst-vitamine-428075/ © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 12 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Seite 12 Layout: Titel & 2 Inhalte Einsatz: Standardfolie Inhalt: Überschrift, 2 variable Inhalte Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich What About Your Needs? React.js: Angular: "Just a library" Full-blown framework Concentrates on the "V" of MVC Covers all of the MVVM paradigm (or MVC, or MVW) React is all about components and composition Angular is all about structuring your application Ideal for complex user interactions Allows for large-scale business applications © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 13 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 2 Inhalte Einsatz: Standardfolie Inhalt: Überschrift, 2 variable Inhalte Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich Framework vs. Library Angular: React.js: Forms and validation Uses 3rd party libraries Modules Can be combined straightforwardly Shadow DOM / local CSS with libraries Built-in support for AJAX, HTTP, No two-way binding and Observables deliberate decision Routing (Optional) two-way binding © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 14 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Teiltrenner Einsatz: Für die Abtrennung von Kapiteln Inhalt: Überschrift des Teils/Kapitels Tipps: Optional sind hier Detail-Inhaltsangaben mögl. Image source: https://upload.wikimedia.org/wikipedia/en/0/02/Telehealth_-_Blood_Pressure_Monitor.jpg © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 15 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Seite 15 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich Market Share No unbiased figures available Educated guess React.js and Angular dominate the browser market Image source: https://pixabay.com/de/sieger-siegertreppe-1013979/ © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 16 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 2 Inhalte Einsatz: Standardfolie Inhalt: Überschrift, 2 variable Inhalte Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich License React: Angular: Since version 16.0.0 (09/2017): MIT License MIT License Before: Adapted from 3-Clause BSD, With patent grant voided if licensor engages in any patent litigation with Facebook or its subsidiaries. © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 17 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 2 Inhalte Einsatz: Standardfolie Inhalt: Überschrift, 2 variable Inhalte Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich But it's TypeScript! Image source: https://www.pexels.com/photo/adult-black-and-white-body-dark-271418/ © OPITZ CONSULTING 2017 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich TypeScript Myths Strong types reduce my productivity TDD detects more errors than strong types Finding type definitions for everything is painful Before long, everybody uses any or starts ignoring error messages © OPITZ CONSULTING 2017 Angular vs. React - When to Choose Which? Seite 19 OC Powerpoint Design 2017 V 0.92 / LTA / TGA / 02.11.2016 Layout: Titel & 1 Inhalt Einsatz: Standardfolie Inhalt: Überschrift, variabler Inhalt Tipps: Bitte Überschrift 1zeilig; div. Inhaltstypen sind möglich TypeScript Mythbusting Strong