Frontend Oss 2016-06-29

Programma JSON-API Even voorstellen… Pauze Angular 2 Socializing Afsluiten (22:30)

https://prezi.com/1iqoa1cg_xs_/json-api-vs-graphql/ JSON-API Marcel van Pinxteren https://prezi.com/1iqoa1cg_xs_/json-api-vs-graphql/

Even voorstellen…

Pauze Frontend Oss

Angular 2 Wie kent Angular 1? Wie ervaring met Angular? En wie met vergelijkbare frameworks als Ember, Knockout. Bij Noordhoff bezig met implementeren: voorbereidingen & uitzoeken Zelf geen ervaring met frameworks Opbouw: eerst algemeen, daarna code. Frontend Oss

Angular in het kort Framework voor het maken van webapps. In het specifiek SPA’s. HTML templates met HTML uitbreidingen centraal in plaats van code centraal (jQuery). Ontwikkeld en ondersteund door Google. Gepubliceerd in 2009. Versie 2 komt uit in 2016.

Waarom versie 2? Mobile first. TypeScript: betere intellisense en foutherkenning. Vergeleken met versie 2: simple but not simplistic. Faster, easier, cleaner. Wie kent TypeScript?

Pro’s Pro’s (voor onszelf): Nieuwbouw => nieuwe tech stack. Nu: MVC, jQuery & Kendo UI. Straks: MVC, Angular 2, TypeScript & Bootstrap. Leesbaarder dan custom code. Populair framework, dus makkelijk om resources & ervaren developers te vinden. Knockout overwogen vanwege ervaring in organisatie.

Google Trends Google trends populaire frameworks Verklaring piek Angular 2: opnieuw leren?

Cons Cons: Angular 2 templates zijn “domme” strings. Oplossing: externe templates. TypeScript: omschakeling in organisatie. Voordeel: lijkt op C#.

Kan ik beginnen? Geen release datum bekend Angular 2 RC1 is uit Angular 2 RC3 en Final in planning Support: IE9+, Android 4.1+, iOS7+ & the usual suspects 12 juni: unit tests falen op IE9 & Android 4.3 github.com/angular/angular/milestones

Pro’s TypeScript Leesbaardere code door syntactic sugar: échte classes, interfaces, supertypes, etc. Superset van JavaScript: het lijkt heel veel op echte JavaScript met wat extra’s. Type checking. Intellisense. Makkelijk te leren voor C# programmeurs

TypeScript TypeScript ES6 ES5 Cirkels niet in verhouding

Overview

Het prototype TypeScript vs generated JS (+map) Set breakpoint in document.getElementById("qd-table-row-double-explained")

Prototype workflow

HTML HTML with <qd> Code in HTML Libs System config Qd-tag Show Qd-class (Class, template, decorator)

Component HTML with <qd> Qd component Class (controller) Decorator Template Selector (qd) Show template Externe templates Backticks (geen concatenation, JS vars)

Service HTML with <qd> Qd component Qualities data service Class (controller) Decorator Template Selector (qd) Qualities data service Manages data

Selector (.qd-table-row) Directive HTML with <qd> Qd component Class (controller) Decorator Template Selector (qd) TypeScript-dingen Error detection (write foo()) Recognize arguments and interfaces Definitie Dependency injection In software engineering, dependency injection is a software design pattern that implements inversion of control for resolving dependencies. A dependency is an object that can be used (a service). An injection is the passing of a dependency to a dependent object (a client) that would use it. Table row directive Class (controller) Qualities data service Manages data Decorator Template Selector (.qd-table-row)

Hoe beginnen? https://www.ng-book.com/2/ (pre-release) https://angular.io/docs/ts/latest/guide/

Socializing Tot 22:30