Frontend Oss 2016-06-29.

Presentatie over: "Frontend Oss 2016-06-29."— Transcript van de presentatie:

1 Frontend Oss

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

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

4 Even voorstellen…

5 Pauze Frontend Oss

6 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

7 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.

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

9 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.

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

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

12 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

13 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

14 TypeScript TypeScript ES6 ES5 Cirkels niet in verhouding

15 Overview

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

17 Prototype workflow

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

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

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

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

22 Hoe beginnen? https://www.ng-book.com/2/ (pre-release)

23 Socializing Tot 22:30