Het tijdperk van de simpele website ligt inmiddels al weer enkele jaren achter ons. Websites van nu zijn complexe applicaties waarmee we hotelkamers reserveren, online bestellingen doen, e-mail lezen, agenda’s bijhouden en internetbankieren. Met de toenemende complexiteit van webapps is ook de code steeds gecompliceerder geworden.

Complexiteit

Ontwikkeltools zijn niet in gelijke mate meegegroeid met die complexiteit. Het is lastig om in een groot project alle onderdelen van elkaar te scheiden, te testen en te onderhouden. Een bibliotheek als jQuery is daar oorspronkelijk nooit voor ontworpen. Zelf JavaScript schrijven en foutloos invoegen voor alle browsers is een hele uitdaging.

In de praktijk komt het er vaak op neer dat de app wordt uitgebreid met een heel scala aan techniekjes en extra libraries voor sliders, carrousels, e-commerce en zo verder. Na een tijdje is de ooit zo cleane webapp een kerstboom van uitbreidingen en jQuery-plug-ins geworden. Vanuit beheeroogpunt is dit een kleine ramp.

Modulaire apps met AngularJS

Welkom AngularJS! AngularJS is een JavaScript-framework dat geheel ontwikkeld is om tegemoet te komen aan de eisen van grote en complexe webapplicaties. AngularJS is oorspronkelijk gemaakt voor een intern project bij Google, maar inmiddels is er ook een grote open source-community actief.

In AngularJS ontwikkel je niet één grote applicatie waarin alles met alles verbonden is. In plaats daarvan maak je kleinere, gespecialiseerde modules. Deze zijn los van elkaar te ontwikkelen en te testen. Op de plekken waar ze nodig zijn in de applicatie, worden ze dynamisch ingevoegd via het principe van Dependency Injection.

Een applicatie wordt zo bijvoorbeeld verdeeld in modules voor het tonen van gegevens in een HTML-pagina (via het principe van controllers en data binding), modules voor het ophalen en cachen van gegevens van de server (met services en factories), modules voor routing, modules met constanten, een module voor in- en uitloggen in de toepassing en zo verder.

Je website of –app heeft dan één startpunt (index.html) met branding, hoofdnavigatie en meer. Hierin worden dynamisch de diverse views met functionaliteit van de applicatie geladen.

Om aan te sluiten bij onder ontwikkelaars bekende begrippen wordt AngularJS ook wel een JavaScript MVC-framework genoemd (naar het programmeerprincipe Model-View-Controller). Maar hiermee doe je de mogelijkheden van AngularJS eigenlijk te kort. AngularJS is veel meer dan dat.

De client en de server

Kenmerk van AngularJS-applicaties is wel dat de de applicatie in principe volledig in de browser draait. AngularJS is een client-sided framework. De rol van de server wordt verder teruggedrongen in vergelijking met traditionele webapps van bijvoorbeeld PHP, .NET MVC, Java of Oracle Apex.

AngularJS-toepassingen zijn in principe volledig onafhankelijk van een server. Ze worden via een API voorzien van gegevens. De server hoeft alleen maar de data te serveren waar de app om vraagt. De app zorgt zelf voor het tonen van de gegevens in HTML-templates, biedt voorzieningen voor filteren en sorteren, bewerken, enzovoort. Een AngularJS-applicatie is daarmee eenvoudig te gebruiken in de browser, op mobiele devices en op verschilende platforms. Met aanvullende tools als PhoneGap is een AngularJS-webapp desgewenst om te zetten naar een standalone app.

…maar AngularJS is wel lastig

Laten we er echter geen doekjes om winden. Het zelf realiseren van AngularJS-applicaties is een pad van vallen en opstaan. Er is ondertussen enorm veel documentatie over te vinden op internet (ik schreef eerder bijvoorbeeld een blogpost over bronnen voor AngularJS). Maar ook vaak zie je door de bomen het bos niet meer. Het is een goed idee om een training AngularJS te volgen, waarin je behalve alle losse termen ook de context leert waarin alle modules op de juiste wijze worden ingezet. Vragen als ‘Wanneer kies ik eigenlijk voor een Service en wanneer voor een Factory?’, of ‘Wat zijn best practices bij security van AngularJS-applicaties?’ worden in samenhang en met concrete voorbeelden besproken.

Als je kiest voor AngularJS als development-framework (en waarom zou  je daar eigenlijk voor kiezen? Ook dat wordt besproken), zijn er waarschijnlijk zelfs gedragingen die je moet afleren. Zo moet je bijvoorbeeld de verleiding weerstaan om voor elk probleem een jQuery-plug-in te zoeken. De meeste AngularJS-projecten kun je zelfs helemaal zonder jQuery realiseren.

Training

Volg bijvoorbeeld mijn driedaagse training AngularJS. Hierin neem ik alle ins en outs van het framework met je door, vanaf een eerste Hello World-voorbeeld tot een complete toepassing. Ook het uitwisselen van gegevens met een server wordt besproken, alsmede het werken met verschillende typen authentication. In overleg kunnen we in de training ook andere onderdelen behandelen. Denk bijvoorbeeld aan animatie met AngularJS, internationalization en localization of SEO-technieken voor AngularJS-applicaties.

Na afloop van de training kun je met een gerust hart beginnen aan het realiseren van moderne webapps met AngularJS!

Nog vragen of speciale verzoeken? Neem contact op om alles te bespreken.

-- Peter Kassenaar
14 april 2014.

Als je mijn twitterfeed de afgelopen tijd in de gaten hebt gehouden, dan heb je gezien dat ik deze week als invaldocent (vervanging wegens ziekte) aan de slag ben geweest op ROC De Leijgraaf.

Op locaties in Oss, Cuijk en Veghel gaf ik eerstejaars leerlingen van de opleiding Applicatieontwikkelaar les in (web)design. We hebben het deze eerste keer gehad over het belang van een herkenbare website, hoe onderscheid je goede en minder goede navigatiekeuzes in een design en het belang van de zoekfunctie op een site. De leerlingen kregen een opdracht om diverse designs met elkaar te vergelijken en hierover hun mening te formuleren. Ik ben van huis uit natuurlijk techneut en geen designer of vormgever, maar kan desondanks deze leerlingen nog voldoende bijbrengen.

Onderstaand een opsomming van enkele willekeurige observaties; dingen die mij opvielen voor, tijdens en na de lessen. Ik heb hier geen waardeoordeel aan verbonden, het is een puur weergave van de realiteit.

Leerlingen

• De opleiding ICT-applicatieontwikkelaar is een jongensaangelegenheid. Ik had (verspreid over drie groepen) 71 leerlingen, waarvan 1 meisje. Niet iedereen was aanwezig. De afwezigen waren ook allemaal jongens. Leeftijd: ca. 16 – 19 jaar.
• De spanningsboog is kort. Je kunt ongeveer vier tot zes minuten iets uitleggen. Daarna verslapt hoe dan ook de aandacht.
• Ze zijn (nog?) niet gewend aan interactiviteit tijdens lesgeven. Ik probeerde wat feedback en discussie te krijgen op stellingen en vragen die ik aan ze stelde. Respons: nul. “Jij bent toch de leraar? Vertel het ons maar.”

Hardware

• Iedereen heeft zijn eigen laptop. Die staat continu open. Aan het begin van de les en tijdens theoriestukjes vroeg ik hen de deksel dicht te klappen en op te letten. De meesten keken alsof ze het in Keulen hoorden donderen (uiteraard deden ze het wel; dat is nu eenmaal mijn natuurlijke gave als docent, haha).
• Best vertegenwoordigde merken: HP, Lenovo en Acer. Opvallend weinig gezien: Dell.
• Aantal Apple MacBook: nul (0).

Software

• Windows 8. Een enkele laptop draaide Windows 7.
• Metro-omgeving: 0%. Bureaubladomgeving: 100%.
• Verder geïnstalleerd: Office 2010/2013 en software die de studenten zelf hadden geplaatst. Dat was in het algemeen niet veel. Skype, enkele games, sommigen hadden specifieke design- of programmeersoftware. De meeste dingen doen ze online, via hun browser. De browser is hun venster naar de wereld.
• Meest gebruikte browser: Google Chrome. Naar mijn indruk zeker 80-90%. Een enkele keer zag ik Firefox voorbij komen. Internet Explorer hooguit 1 of 2 keer.

Mijn ideeën hierbij:

Het viel me op dat niemand een Apple notebook gebruikte. Ik vroeg of dit door de school werd afgeraden, of dat specifieke Windows-modellen waren voorgeschreven. “Nee hoor”, was het antwoord. “Maar die dingen zijn gewoon veel te duur. Ik kan geen vijftienhonderd euro betalen voor een laptop. En met een Windows-laptop van vijfhonderd euro kan ik ook alles doen.”

Toevallig gaf ik ook les op de dag na de introductie van de iPhone 5S en de iPhone 5C. Met name die laatste variant werd met hoongelach ontvangen. ‘Een goedkope iPhone?  Die gaat nog 550 euro kosten! Dat doet toch geen mens.” Waarvan akte.

Adobe

Wat mij ook opviel, was de vrijwel volledige afwezigheid van Adobe-software. Op een enkele laptop was Photoshop aanwezig, maar dat was ofwel een oude versie (CS3), ofwel een illegale kopie. Ook dat heeft alles met kosten te maken. De leerlingen kunnen het niet (meer) betalen. Het dit jaar door Adobe geïntroduceerde abonnementssysteem van Creative Cloud is veel te duur voor deze leerlingen. Natuurlijk krijg je bij een abonnement de volledige Adobe suite met alle tools die je je kunt wensen, maar 60 euro per maand (geen keuzes, geen uitzonderingen voor studenten) kunnen ze gewoon niet opbrengen.

De versie Creative Cloud Student & Teacher edition (19,99 euro/maand) is TOTAAL onbekend.

Mijns inziens graaft Adobe hiermee zijn eigen graf. Er wordt nu een generatie studenten opgeleid die volstrekt onbekend zijn met software van Adobe. En als die straks over een jaar of drie, vier op de markt komen en het bedrijfsleven ingaan, gaan die heus niet ineens wel Photoshop kopen. Want daar kunnen ze toch niet mee werken. Dat hebben ze niet geleerd. Dus zullen ze hun werk uitvoeren met alternatieven. Hetzij goedkope varianten, hetzij via open source varianten.

UPDATE: 3 oktober 2013 – per vandaag is Adobe Creative Cloud ook in een Slim-licentie verkrijgbaar voor EUR 11,- per maand. Zie http://slim.nl/shop/Software/Grafisch/Adobe.aspx voor meer informatie. Een goede zet wat mij betreft.

Conclusie

Het was vermoeiend, maar leuk om te doen. Elke les moet ik afzonderlijk voorbereiden, want ik heb uiteraard geen kant-en-klaar MBO-lesmateriaal met vragen en oefeningen op de plank liggen. Laat staan Design-lesmateriaal.

En ondanks dat ik als docent continue, vier uur lang (de lesblokken duren 2 x 2 uur) de directe concurrentie moet aangaan met YouTube, Soundcloud, online shooters en headphones als ik ook maar vijf seconden mijn mond dichthoud, of me even omdraai naar het digibord, zal ik volgende week weer glimlachend in de auto stappen. Uiteraard hoop ik dat hun reguliere docent weer snel op de been is, maar tot die tijd is het een leuke ervaring en aanvulling op de rest van mijn trainingen.

Peter Kassenaar
-- 13 september 2013.

Het was een tijd lang erg in de mode om alles online en digitaal te willen doen. Zo ook trainingen en cursussen voor werknemers. E-learning, e-lokaal, online teaching en meer van die namen. En hoewel online leren zeker voordelen heeft en wat mij betreft een vaste plek heeft verdiend, komen er toch steeds meer bedrijven en organisaties terug van alleen maar online cursussen inkopen. Er worden anno 2013 weer meer ‘ouderwetse’, klassikale trainingen verzorgd. Ik merk dat aan de aantallen cursisten die in mijn klasjes verschijnen en het aantal aanvragen dat ik krijg om training te verzorgen.

Voordelen

Het samen leren in een klaslokaal onder ervaring van een ervaren docent die live en proactief met de cursisten op de stof kan ingaan wordt weer meer gewaardeerd. Deze leervorm heeft onder meer de volgende voordelen.

• Volledig concentreren op de stof. Niet worden afgeleid door email, telefoontjes, binnenlopende collega’s, andere apps op de computer of iPad, of de situatie thuis (bij thuis e-learning).
• Ervaren docent rechtstreeks beschikbaar voor vragen.
• Flexibiliteit; indien een onderdeel bekend is, kan een (goede) docent doorgaan met een volgende onderdeel, zodat de leeropbrengst hoger is.
• Een goede docent kan differentiëren in de opdrachten en oefeningen en deze realtime aanpassen aan het niveau van de cursist. E-learningsystemen zijn hierin amper flexibel.
• Interactiviteit; contact met medecursisten: horen welke vragen bij anderen leven, uitwisselen hoe andere organisaties met vraagstukken omgaan.
• Netwerken; uitwisselen van gegevens en ervaringen met medecursisten.
• Niet te onderschatten: lekker lunchen.

Trainingen

De komende maanden geef ik voor diverse opleiders onder meer de volgende trainingen. Klik op de links voor meer informatie of inschrijven. Neem contact op als je me rechtstreeks een vraag wilt stellen.

Bovenstaande data en onderwerpen zijn open inschrijvingen met een vooraf vastgesteld programma. Daarnaast verzorg ik nog diverse besloten in-company trainingen. Hierbij is meer maatwerk mogelijk. Ook hiervoor kun je altijd even contact opnemen.

Hopelijk tot ziens tijdens een van de cursussen!

Peter Kassenaar
-- 16 februari 2013