Angular Best Practices Door Alex en Chris van Beek
Over ons • Enthousiastelingen • Software Architecten bij Luminis Arnhem B.V. • Gespecialiseerd in Microsoft technologie: .Net, Azure en Windows • Twitter: @Beekje en @cbeek • Blog: http://arnhem.luminis.eu/alex-van-beek/ en http://arnhem.luminis.eu/chris-van-beek
Inleiding • Veel ervaring met grote Angular projecten • Elk project worden er nieuwere en beter tools, technieken en methodes toegepast • Hieruit ontstaat een vaste set best practices die wij graag met jullie willen delen!
Inhoud • • • • • • • •
Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
Applicatie structuur • Folders by feature structure • Structuur blijft plat • Ontwikkelaars kunnen aan namen van folders en bestanden zien wat code voorstelt
Applicatie structuur:demo
Inhoud • • • • • • • •
Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
Typescript • Javascript is zeer krachtig en flexibel.. • Maar gestructureerd en object georiënteerd javascript kan erg moeilijk zijn • Er is geen statische typering, tooling heeft het moeilijk met ondersteunen van ontwikkelaars • Er is geen modularisatie systeem in javascript • Los deze problemen op…Door Typescript te gebruiken!
Typescript demo: • Typescript playground • Applicatie bekijken met Typescript: • Controllers, implement UserCtrl • Services
Inhoud • • • • • • • •
Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
Gebruik en begrijp de As syntax • Bind controllers aan views met de As syntax • Voorkomt scope clashes • Maakt het makkelijker om parent controller te benaderen vanuit child views (UI-Router) • ICM Typescript, geeft ons WPF achtige databinding aan objecten
Demo As syntax • • • •
Bekijk scope clashing Voorkom scope clashing Bekijk het effect op $scope Controller wordt zelf object op de scope!
Inhoud • • • • • • • •
Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
Angular Translate • Vertalingen in Angular, makkelijk gemaakt • Zorgt voor onderhoudbare teksten in je app • Te vergelijken met resource files in .Net
Demo Angular Translate • • • •
Angular-Translate aan je app toevoegen Config aanroep toevoegen Pagina vertalen Taal wisselen
Inhoud • • • • • • • •
Applicatie structuur Typescript Controller As Angular-Translate One time bindings Angular UI Router Module laders Front-end build
One time bindings • Beperk de watch collectie waardoor de $digest sneller wordt!
Demo: One time bindings • Bekijk de syntax • Zie een hele kleine performance winst, meer read only data op de pagina is meer winst! Handig icm Angular translate! • Kunt testen door te profilen en naar $digest te kijken
Inhoud • • • • • • • •
Applicatie structuur Typescript Controller As Angular-translate One time bindings Angular UI router Module laders Front-end build
Angular UI Router • • • •
Ondersteunt nested views Koppelt URL’s los van applicatie state Applicatie wordt een state machine States kunnen gekoppeld worden aan Url’s of aan gedrag of aan beiden
Angular UI Router demo: • • • • •
Nested views States configureren Resolve OnEnter PatientenOveview en PatientOverview
Inhoud • • • • • • • •
Applicatie structuur Typescript Controller As Angular-translate One time bindings Angular UI router Module laders Front-end build
Gebruik een module lader • Javascript kent geen module systeem • Kan een enorme brei worden van script tags die precies in de juiste volgorde moeten staan binnen je html pagina's. • RequireJS of Browserify • Typescript kent RequireJS!
RequireJS • Vereist een specifieke structuur in je javascript bestanden • Kan ook overweg met javascript libs die geen weet van Require hebben (zoals Angular)
RequireJS Demo: • • • •
Bekijken de html Configuratie voor RequireJS Typescript code Bekijk gecompileerde typescript code
Inhoud • • • • • • • •
Applicatie structuur Typescript Controller As Angular-translate One time bindings Angular UI router Module laders Front-end build
Gebruik een front-end build proces • We zijn gewend MSBuild te gebruiken • Front-end build tools ondersteunen meer en beter typische web build taken • Typescript compilatie • SSAS compilatie • Uglyify en concateneren van code • Angular tweaks (zoals TemplateCache!) • Zijn NodeJS plugins
Front-end build tools • Gulp • Sneller (streams vs kopieren en open/sluiten van bestanden) • Code over configuratie • Draait om streams die van de ene taak naar de andere gestuurd kunnen worden. Kunt zelf alles mixen en matchen • Grunt • Configuratie over code • Draait om veel gebruikte taken die in een bepaalde volgorde uitgevoerd worden
Demo: Gulp • Bekijken gulp bestand en lopen de best practices na • Bespreken taken die je per se in front-end build wilt hebben. • Typescript compilatie • RequireJs Concat • Mangling • Angular template caching
Vragen • ?????
Your feedback is important! Scan the QR Code and let us know via the TechDays App.
Laat ons weten wat u van de sessie vindt via de TechDays App! Scan de QR Code. Bent u al lid van de Microsoft Virtual Academy?! Op MVA kunt u altijd iets nieuws leren over de laatste technologie van Microsoft. Meld u vandaag aan op de MVA Stand. MVA biedt 7/24 gratis online training on-demand voor ITProfessionals en Ontwikkelaars.
