Dit is het webblog van Peter Kassenaar - Ik geef training en consultancy in het maken van crossplatform mobiele apps en webapps. Trefwoorden: AngularJS, PhoneGap, jQuery/Mobile. HTML5, CSS3, JavaScript, AJAX, JSON. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter.(@PeterKassenaar)

Terug naar de algemene site.

07maart

Angular 2, Angular 4 of gewoon “Angular”?

Na een voorbereidingstijd van ruim 2,5 jaar is in september 2016 eindelijk de final release van Angular 2 vrijgegeven. Tegelijkertijd introduceerde Team Angular een nieuwe manier van versiebeheer in Angular.

Met Angular 2 werd semantic versioning of kortweg semver ingevoerd. Voorheen hadden we releases als Angular 1.4, Angular 1.5 enzovoort. Met ingang van Angular 2 is het versiesysteem met drie cijfers ingevoerd, bijvoorbeeld 2.2.1, waarbij de drie cijfers staan voor een major.minor.patch-versie. Dit is een geaccepteerde standaard in de softwarewereld en betekent het volgende:

  • 2 – Majorversie- bij een upgrade mogelijk breaking changes ten opzichte van eerdere major versies.
  • 2 – Minorversie, nieuwe features zonder breaking changes.
  • 1 – Patchversie, met bugfixes. Geen breaking changes.

Het semver-systeem is sinds de release van Angular 2 trouw gevolgd en op het moment van schrijven is Angular 2.4.0 de actuele versie.

Angular Roadmap

Tijdens zijn keynote op de conferentie NG-BE in december 2016 gaf Angular Team Lead Igor Minar een toelichting op de roadmap van Angular. In maart 2017 zal Angular 4 verschijnen.

Angular 4 - backwards compatible met Angular 2 - (C) Igor Minar

“Wat? Angular 4? Wat is er met Angular 3 gebeurd? Betekent dit weer dat ik een compleet nieuw framework moet leren?”

Het antwoord op deze vragen is gelukkig een duidelijk NEE.

Angular 4 is  - zoals de slide al aangeeft – backwards compatible met alle Angular 2-code die je tot nu toe geschreven hebt. Je hoeft niet opnieuw een framework te leren. De overgang van Angular  2 naar 4 zal (in tegenstelling tot de overgang van Angular 1 naar Angular 2) pijnloos verlopen. Wel zullen er nieuwe onderdelen worden geïntroduceerd, zoals een nieuwe view compiler die kleinere code oplevert en betere AoT-compiling. Maar verder is het enige dat gewijzigd is, het versienummer.

Meer informatie hierover vind je bijvoorbeeld in de blogpost van Igor Minar.

Waar is Angular 3 gebleven?

Het zou natuurlijk logisch zijn om na Angular 2 eerst Angular 3 uit te brengen. Maar Angular bestaat uit allemaal losse onderdelen (core, router, forms, compiler en meer), met elk hun eigen versienummers. Zo is een zeer belangrijk onderdeel als de router van Angular op dit moment al bij versie 3.3 aangeland. En als deze ook geüpgraded zou worden, zouden we Angualr 3 met routerversie 4 krijgen. Dat is ook verwarrend.

Daarom is  voor de strategie gekozen om vanaf versie 4 alles gelijk te trekken. In het projectbestand package.json staan straks dus allemaal dezelfde versienummers. Dat is wel een verademing. Maar voordat het zover is, moeten we eerst even door de zure appel met versienummers heen bijten.

Snelle upgrades

Het zal niet bij Angular 4 blijven. Team Angular heeft een ambitieus schema samengesteld voor de toekomst. Elke zes maanden zal een nieuwe versie van Angular verschijnen:

Tot ziens versienummers, Hello Angular

Om die reden ziet Team Angular ook liever vandaag dan morgen dat versienummers in projecten verdwijnen. “It’s just Angular”, aldus Igor Minar. Dit betekent dat we vanaf dit moment eigenlijk nog maar twee grote stromingen overhouden in Angular-land:

  • AngularJS – de eerste versie van het framework, gebaseerd op de 1.x-reeks.
  • Angular – alles wat Angular 2 en hoger is. Het versienummer is hierbij van ondergeschikt belang. Gebruik het liever niet meer.

Onze trainingen

Onze trainingen en voorbeeldcode wordt vanaf het verschijnen van Angular 4 (of vanaf nu dus kortweg: Angular), ook aangepast aan de nieuwe versienummers. Inhoudelijk wordt de training telkens bijgewerkt volgens de laatste standaardaarden.

Maar je weet nu ook: het versienummer doet er eigenlijk niet meer zo toe.

Wil je een Angular-training organiseren binnen je bedrijf of instelling of de mogelijkheden bespreken, aarzel dan niet om contact op te nemen.

-- Peter Kassenaar
7 maart 2017.

02juni

Online training Angular 2 – update

angular2-leren-begrijpen-promo-image

Op dit moment ben ik bezig met de ontwikkeling van de training “Angular 2 – leren en begrijpen”. Deze zal worden gepubliceerd op het online learningplatform Udemy.

Het was de bedoeling dat deze training medio mei 2016 zou verschijnen. Dat is helaas niet gelukt.

Ik ben er druk mee bezig, maar het opnemen en bewerken van de video’s duurt in combinatie met mijn overige werk langer dan ik vooraf had ingeschat.

Bovendien is het framework zelf zoals je wellicht hebt gezien nog druk in ontwikkeling. Met name de Router is de afgelopen weken flink onder handen genomen. De oorspronkelijke router is nu als ‘deprecated’ aangemerkt – terwijl de nieuwe router nog niet gereed is. (https://angular.io/docs/ts/latest/guide/router-deprecated.html) . Zowel de router zelf, als de documentatie hierover is nog niet klaar.

Het is daarom een lastige beslissing: Maak ik de module over routing (waar ik juist mee bezig was) op basis van de nu verouderde router, of ga ik toch alvast de nieuwe router gebruiken (die dus nog niet klaar is)?

Keuzes, keuzes ;-)

Ik heb toch besloten de bestaande routermodule opnieuw te gaan maken, met de nieuwe router, en de onderdelen die op het moment van opnemen nog niet gereed zijn aan te geven. Zodra de router wel klaar is, hoop ik vervolgens op een later tijdstip de training aan te vullen.

Dat betekende helaas echter wel weer een nieuwe vertraging.

De vernieuwde planning is dat de training Angular 2 over ongeveer 2 – 2,5 weken klaar is, medio juni 2016.

Mocht je ondertussen vragen hebben, aarzel dan niet om nader contact op te nemen.

Uiteraard kun je je nog altijd aanmelden voor een kortingscode.

Stay tuned, bedankt voor je geduld!

-- Peter Kassenaar
2 juni 2016

26april

Web Development Library–Angular 2

Web Development Library - Angular 2

Deze week is Web Development Library – Angular 2 verschenen. Angular 2 is een modern framework voor webdevelopment en is de opvolger van AngularJS. Maar behalve de naam is er maar weinig dat de twee frameworks met elkaar gemeen hebben. Angular 2 heeft een totaal nieuwe syntaxis en benadering voor zowel de front-endcode (in de templates en HTML) als de logica. Er wordt nu gewerkt met ECMAScript 2015-classes in plaats van JavaScript-functies.

Angular 2 is dan ook geen eenvoudig framework om te leren. Deze uitgave helpt u daarbij!

Specficaties

  • Boek, paperback, 240 pagina’s.
  • ISBN-13: 978-90-5940-868-5 (9789059408685)
  • Geschikt voor opleidingen en zelfstudie
  • Onafhankelijk van gebruikte platform en browser
  • Prijs: EUR 29,95

Van de flaptekst

“In dit deel van de Web Development Library leert u werken met de nieuwe, op componenten gebaseerde manier om webapplicaties te programmeren. U maakt kennis met de vernieuwde wijze van databinding, services, observables, routing en andere belangrijke Angular 2-concepten. Aan het einde gaan we kort in op het upgraden van AngularJS 1.x-applicaties naar Angular 2. Daarnaast leert u werken met bijkomende tools en programmeertalen zoals Node.js, TypeScript en ECMAScript 2015.

Tot de behandelde onderwerpen behoren:

  • Kennismaken met Angular 2
  • Hello World in Angular 2 – uw eerste component
  • Databinding op allerlei manieren
  • Datavoorziening met services
  • Asynchrone services – gegevens ophalen uit databases
  • Angular-applicaties als boomstructuur van componenten
  • Routing
  • Meer over Angular 2 – pipes, formulieren en upgraden

Meer informatie en downloads zijn te vinden op www.webdevelopmentlibrary.nl.”

Direct bestellen

Peter Kassenaar
-- 26 april 2016

10september

Van AngularJS naar Angular2 - deel 2

In een korte serie blogposts kijk ik vooruit naar de komst van Angular2, de volgende versie van het populaire JavaScript-framework AngularJS. Lees ook het eerste deel van deze serie:

Angular2 logo

Specifieke kenmerken van Angular2

In de vorige blogpost zagen we al dat Angular2 is gebouwd op moderne standaarden die nog niet beschikbaar waren toen de eerste versies van AngularJS het licht zagen. Dat is mooi, maar het betekent wel dat Angular2-projecten voor het grootste deel niet compatibel zullen zijn met bestaande AngularJS-code. Wat is er dan zoal nieuw in Angular2?

ECMAScript 2015

Angular2 zal geheel geschreven zijn in en voor ECMAScript 2015 (voorheen: ‘ECMAScript 6’). Dit is de nieuwste versie van JavaScript die in de zomer van 2015 voltooid is. Langzamerhand zullen browsers steeds meer ECMAScript 2015-kenmerken gaan ondersteunen. Deze versie brengt classes, modules en meer binnen JavaScript. Met nieuwe keywords wordt tevens het principe van generics mogelijk gemaakt in JavaScript. ECMAScript 2015 maakt meer modulaire opbouw van code mogelijk, waarbij het seperation of concerns (SoC)-principe is ingebouwd in het framework. Uiteraard kon dit ook al in AngularJS 1.x-projecten, maar dan moest u er zelf op letten.

TypeScript

TypeScript is een optionele uitbreiding van ECMAScript 2015 waarmee annotaties in JavaScript-code toegevoegd kunnen worden. Zo wordt het voor het eerst in JavaScript bijvoorbeeld mogelijk aan te geven of een parameter een string is, een array of objecten. Met TypeScript kunnen (zoals de naam al aangeeft) en types kunnen worden gedefinieerd in JavaScript die vervolgens ook daadwerkelijk door de JavaScript-compiler in de browser worden afgedwongen. Dit principe kennen we uiteraard al jaren in Java en C#, maar is een ware revolutie in een loosely typed language als JavaScript, die ook nog eens op de client (browser) draait en niet op de server.

Deze eigenschappen zijn niet verrassend overigens, want TypeScript wordt gemaakt door dezelfde Anders Hejlsberg, die ook C# ontwikkeld heeft (en nog veel langer geleden de auteur was van zowel Turbo Pascal als Delphi). Google en Microsoft werken nauw samen bij de ontwikkeling van TypeScript en Angular2.

Module Loader

In AngularJS is het niet mogelijk om ‘lazy loading’ uit te voeren met modules. Alle benodigde scriptbestanden moeten op voorhand bekend zijn en geladen worden, ook al worden ze door de klant vervolgens nooit gebruikt in de app. Er zijn wel omwegen mogelijk in de vorm van extra libraries als require.js, maar het blijft behelpen. In Angular2 is de globale module loader System.js gebruikt. Deze laadt op verzoek ECMAScript 2015-modules, of modules die andere desingprincipes aanhangen, zoals AMD of CommonJS. Alles werkt. U hoeft geen keuze meer te maken. Dit is vooral in grotere projecten uiteraard erg handig.

Componenten

In AngularJS schreef u gewoon HTML-pagina’s die verrijkt werden met ng-* directives om aan te geven dat het betreffende element door Angular behandeld werd. In Angular2 wordt dat anders. De complete app wordt opgebouwd uit componenten. En: elk onderdeel op de pagina is een component: de menubalk, de footer, het inlogformulier, het inhoudsgebied, tabellen met data, enzovoort. Componenten kunnen andere componenten laden. Elke component is als het ware een mini-applicatie die onafhankelijk kan draaien en waarin de afhankelijkheden (dependencies) van andere componenten wordt aangegeven. Via de module loader zoekt Angular de betreffende component op en wordt hij geladen in de component waarin hij nodig is. Een applicatie bestaat op die manier letterlijk uit een boomstructuur (tree) van componenten.

component-tree

Componenten zijn daarmee de vervanger van traditionele directives. Maar ook directives zelf bestaan nog in Angular2. Het verschil is dat componenten een eigen stukje user interface hebben (een view), terwijl directives in Angular2 worden toegepast op een stukje bestaand DOM. Denk bijvoorbeeld aan een tooltip-directive of animatie-directive voor een bestaand DOM-element.

Consistente schrijfwijze

Angular2 biedt voor het eerst een consistente schrijfwijze voor attributen, events en referenties in de pagina (dus eigenlijk: binnen de componenten). Dit zal veel webdesigners en Angular-veteranen afschrikken, omdat de HTML er totaal anders uit komt te zien. De bekende AngularJS-directives als ng-click, ng-bind, ng-app, ng-repeat komen allemaal te vervallen!

  • Waarden van attributen, de properties, worden nu gebonden met blokhaken (als in <div [hidden]="isHidden">).
  • Events worden gebonden met ronde haken, als in <button (click)="handleClick">.
  • Referenties naar een element worden opgegeven met een hashtag <input #firstName …>.

Dit ziet er in het begin bizar uit, maar uiteindelijk is het wel veel consistenter omdat nu aan de linkerkant van het isgelijkteken altijd de handeling wordt aangegeven.

In de oude situatie werd aan de linkerkant van de vergelijking een directive geplaatst, waarbij het framework aan de rechterkant maar moest uitvogelen wat er moet gebeuren (databinden? Waarde in de user interface schrijven? Functie aanroepen op controller?). Dit kostte erg veel performance en maakt het lastig voor tooling en testing om te reageren op AngularJS 1.x-code.

Door deze syntaxis-verandering kunnen tientallen directives vervallen en hoeven nieuwkomers in Angular2 minder dingen te leren. Maar, eerlijk is eerlijk, voor overstappers zal het lastig zijn. Meer dan lastig.

Wilt je meer weten over het hoe-en-waarom van deze designbeslissing, bekijk dan de keynote van Misko Hevery (de oorspronkelijke maker van Angular) op Ng-conf 2015 (www.youtube.com/watch?v=-dMBcqwvYA0) .

Training in Angular2

In oktober ga ik (opnieuw) naar de VS voor conferentie en training over onder meer Angular2. Vanaf medio november 2015 zal ik deze kennis gebruiken om de eerste Angular2-trainingen in Nederland en België op te gaan zetten. Neem contact op als je hier alvast meer over wilt weten.

Medio voorjaar 2016 – zo snel mogelijk na de definitieve releasedatum – schrijf ik een boek over Angular2 in de Web Development Library.

Peter Kassenaar
-- 10 september 2015

19mei

Aanbieding - Web Development Library pakket

Pakket - Web development Library: JavaScript, jQuery en jQuery Mobile

De uitgaven in de Web Development Library zijn zodanig geschreven dat de boeken afzonderlijk gelezen kunnen worden, maar onderling toch goed op elkaar afgestemd zijn. Er staat geen dubbele informatie in. De boeken worden daarom vaak in combinatie met elkaar aangeschaft.

In de Web Development Library zijn meerdere ‘lijnen’ aanwezig van titels die goed op elkaar aansluiten. Een voorbeeld hiervan is

  • Web Development Library – JavaScript
  • Web Development Library – jQuery
  • Web Development Library – jQuery Mobile

En: tot 31 juli 2015 zijn deze drie titels in een voordelig totaalpakket te bestellen. In plaats van EUR 74,85 kosten de drie boeken bij elkaar maar EUR 54,95.

Dat betekent een korting van bijna twintig euro – en daarmee bijna “drie boeken voor de prijs van twee”!

Peter Kassenaar
-- 19 mei 2015

26februari

Web Development Library–AngularJS

Cover van Web Development Library - AngularJS, ISBN 9789059407879

Deze week is Web Development Library – AngularJS verschenen.

AngularJS is een van de populairste JavaScript-frameworks om webapplicaties te maken. Apps die je met AngularJS maakt draaien volledig in de browser en zijn dus geschreven in HTML, CSS en JavaScript (en Angular). Oorspronkelijk was AngularJS een intern project bij Google, maar sinds vrijgave in de open source community is de populariteit van dit framework als een raket de lucht in geschoten.

Wat zijn directives? Hoe pas je modulen, controller, services en factories toe? Hoe laat je een Angular-applicatie communiceren met externe API’s? Op al deze vragen geeft Web Development Library – AngularJS het antwoord!

Specificaties

  • Boek, paperback, 240 pagina’s.
  • ISBN-13: 978-90-5940-787-9 (9789059407879)
  • Geschikt voor opleidingen en zelfstudie
  • Onafhankelijk van gebruikte platform en browser
  • Prijs: EUR 24,95
  • Lees een voorbeeldhoofdstuk op Yindo 

Van de flaptekst:

“In dit deel van de Web Development Library leert u hoe u AngularJS inzet om dynamische webapplicaties te schrijven. U maakt kennis met data bindings, modules, controllers en andere belangrijke Angular-concepten. Aan het einde leert u bovendien hoe u AngularJS desgewenst laat samenwerken met bestaande jQuery-plug-ins door eigen custom directives te schrijven. Tot de behandelde onderwerpen behoren:

  • Kennismaken met AngularJS
  • Modules en controllers schrijven
  • Routing in uw applicatie
  • Gegevensvoorziening met Factories en Services
  • Live gegevens ophalen en communiceren met API’s met $http
  • Uitgebreide standaarddirectives gebruiken
  • Custom directives schrijven

Meer informatie en downloads zijn te vinden op www.webdevelopmentlibrary.nl.”

Direct bestellen

Peter Kassenaar
-- 26 februari 2015

18februari

20% Korting Web Development Library - AngularJS

Web Development Library - AngularJS tijdelijk met vijf euro korting

Binnenkort verschijnt de uitgave Web Development Library – AngularJS. Het is nog niet verschenen, maar voor (zeer) korte tijd kun je het boek bestellen met een korting van vijf euro. Toch een aantrekkelijk idee in deze economisch barre tijden.

  • Normale prijs: EUR 24,95
  • Voorintekening: EUR 19,95

Je kunt je exemplaar reserveren op de sites van

Niet alleen heb je dan een leuke korting te pakken, je weet ook zeker dat je het boek als eerste binnen hebt zodra het is verschenen.

Maar wees er snel bij. De korting is maar geldig tot 21 februari 2015!

Peter Kassenaar
-- 18 februari 2015.

30oktober

Web Development Library - jQuery Mobile

wdl_jqm_covers

Deze week is de uitgave Web Development Library – jQuery Mobile verschenen. In eerdere aankondigingen hiervan zag je altijd de groene cover, die aan de linkerkant staat (=dezelfde kleur als het jQuery Mobile logo). Maar door een technische fout is het omslag helaas in een andere kleur gedrukt.

En omdat het natuurlijk zonde is  - en ook erg duur zou zijn - om tweeduizend boeken in de papierversnipperaar te gooien en nieuwe exemplaren te drukken, is besloten deze editie te handhaven. Je zult in de (web-) winkels dan ook het boek met de oranje cover aantreffen.

Het goede nieuws is dat de inhoud wel goed is gedrukt en dat deze even uitstekend is als met een groene cover het geval zou zijn!

In het boek leer je hoe je websites optimaliseert voor gebruik op een mobiel apparaat (smartphone of tablet) door gebruik te maken van de JavaScript-bibliotheek jQuery Mobile. Nooit meer zoomen-en-verschuiven door je website op een mobieltje! Met een mobiele variant van je website hoef je de code maar één keer te schrijven en ziet je site er goed uit op iPhone, Windows Phone en Android-apparaten.

Specificaties

  • Boek, paperback, 210 pagina’s.
  • ISBN-13: 978-90-5940-760-2 (9789059407602)
  • Geschikt voor opleidingen en zelfstudie
  • Onafhankelijk van gebruikte platform en browser
  • Prijs: EUR 24,95

Van de flaptekst:

“Met dit deel van de Web Development Library leert u snel werken met jQuery Mobile. Dit framework optimaliseert websites voor weergave op een mobiel apparaat. De verwachting is dat medio 2015 websites voor het grootste deel met een mobiel apparaat worden bezocht. Gelardeerd met veel voorbeelden en oefeningen is dit boek uw ultieme inleiding in de kracht van werken met jQuery Mobile. Tot de behandelde onderwerpen behoren:

  • Kennismaken met jQuery Mobile
  • Navigeren met toolbars, buttons en navbars
  • Meer UI-componenten: panels, popups en collapsibles
  • Listviews maken en gebruiken
  • Werken met formulieren
  • Vormgeven met thema’s
  • De jQuery Mobile-API

Meer informatie en downloads bij het boek vind je op www.webdevelopmentlibrary.nl

Direct bestellen

Peter Kassenaar
-- 30 oktober 2015