Fronteers - JavaScript at your enterprise (Dutch)

Dutch presentation about JavaScript web development and the modern toolbelt (Grunt/Yo/Bower/...).

Transcript

1. JAVASCRIPT AT YOUR ENTERPRISE Presentation by — Consultant at @g00glen00b @OptisNV
2. JAVASCRIPT... IT'S EVERYWHERE!
3. JAVASCRIPT... IT'S EVERYWHERE!
4. JAVASCRIPT... IT'S EVERYWHERE!
5. JAVASCRIPT... IT'S EVERYWHERE! Dzone, Reddit, StackOverflow, ... JavaScript is populair Dagelijks nieuwe frameworks en libraries
6. IS IT THAT GOOD? Grote vooruitgang laatste decennium HTML5 Explosieve groei van frameworks and libraries Application lifecycle tools (mede dankzij Node.js)
7. HTML5 Nieuwe elementen Local database Geolocation Video API Audio API Canvas WebGL File API WebSockets CSS3
8. NIEUWE FRAMEWORKS
9. APPLICATION LIFECYCLE Yo Grunt Bower Component PhantomJS Karma QUnit Jasmine The intern ...
10. THE "DEVELOPER" IMPROVED Meer developers zijn op de hoogte van de DO en de DON'T's Vergelijken met "===" en "!==" Global namespace vermijden Gebruik van closures ...
11. WAT MET DE REST VAN DE WERELD
12. MICROSOFT Silverlight? Node.js voor Windows Server Internet Explorer & HTML5 support
13. ADOBE Flash voor Linux + Android? Acquires Phonegap, platform voor mobile apps met HTML5 + CSS + JS
14. JAVA JavaServer Faces (JSF)? JSF vs AngularJS
15. GOOGLE Google Web Toolkit? Enorm veel succes met AngularJS Dart
16. IBM Lanceert cloud platform BlueMix met support voor Node.js + MongoDB Ontwikkelt Node-red, een Node.js variant voor Apache Camel Acquires Worklight, platform voor mobile apps met HTML5 + CSS + JS
17. MOZILLA Research projecten zoals asm.js, Parallel JavaScript, ... Samenwerking met Epic: Unreal engine in browser Webmaker: Tutorials voor het maken van toepassingen op het web
18. JFROG Gekend van Artifactory Nu ook voor Node.js packages
19. ANDERE EBAY - QL.IO PAYPAL - KRAKENJS
20. HOW DO WE DO IT? 3 STAPPEN 1. RESTIFY YOUR DATA 2. FRONT-END HERWERKEN 3. APPLICATION LIFECYCLE UITBREIDEN
21. RESTIFY YOUR DATA Business data via web services JSON of XML? Multi-channel approach (mobile?) Eenvoudige integratie met frameworks
22. FRONT-END HERWERKEN Monoliet JS bestanden Hoe koppeling logica + HTML vermijden Structuur Testability Zijn daar design patterns voor? Model, View, Controller HTML = view Logica = controller
23. UITBREIDEN VAN APPLICATION LIFECYCLE Dependency management Minification + compressing Unit testing Steeds meer tooling dankzij Node.js Yeoman Yo: Project scaffolding Grunt: Task runner Bower: dependency management Kunnen afzonderlijk geïnstalleerd worden
24. UITBREIDEN VAN APPLICATION LIFECYCLE TEST, 1, 2, 3... Test je JavaScript code JavaScript testing frameworks: QUnit Jasmine KarmaJS test runner Grunt plugin Reporters Browser PhantomJS: Headless testen
25. UITBREIDEN VAN APPLICATION LIFECYCLE VOORBEELD LIFECYCLE 1. Start project: Project scaffolding met Yo 2. Development project: Dependency management met Bower Versionering van dependencies Code quality + test coverage met Grunt 3. Deployment project: Deployment in cloud met Grunt 4. Continuous integration: Met Jenkins (of Travis CI) 5. Versioning: Git Project kan herbruikt worden in andere projecten Tagging releases: Bower dependency versies
26. TOEKOMST Met deze drie stappen ben je klaar voor de toekomst Node.js? Back-end aanpassen Mobile? Nieuwe app op basis van business services
27. TOEKOMST GET MEAN Full JavaScript stack MongoDB: NoSQL database (JSON/BSON documenten) Express: Web framework voor Node.js AngularJS: Client-side MVC framework Node.js: JavaScript platform Ook andere stacks bestaan: Meteor Nodember ...
28. DEMO APPLICATION LIFECYCLE: MAVEN & GRUNT
29. JAVASCRIPT IN INDUSTRY
30. THE END QUESTIONS? Mail: Twitter: Github: me@g00glen00b.be @g00glen00b g00glen00b NU ALLEMAAL SNEL DE UITSLAG VAN CHECKEN #COLCIV #WK2014