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
   

   View Slide

2. JAVASCRIPT... IT'S EVERYWHERE!
   

   View Slide

3. JAVASCRIPT... IT'S EVERYWHERE!
   

   View Slide

4. JAVASCRIPT... IT'S EVERYWHERE!
   

   View Slide

5. JAVASCRIPT... IT'S EVERYWHERE!
   Dzone, Reddit, StackOverflow, ...
   JavaScript is populair
   Dagelijks nieuwe frameworks en libraries
   

   View Slide

6. IS IT THAT GOOD?
   Grote vooruitgang laatste decennium
   HTML5
   Explosieve groei van frameworks and libraries
   Application lifecycle tools (mede dankzij Node.js)
   

   View Slide

7. HTML5
   Nieuwe elementen
   Local database
   Geolocation
   Video API
   Audio API
   Canvas
   WebGL
   File API
   WebSockets
   CSS3
   

   View Slide

8. NIEUWE FRAMEWORKS
   

   View Slide

9. APPLICATION LIFECYCLE
   Yo
   Grunt
   Bower
   Component
   PhantomJS
   Karma
   QUnit
   Jasmine
   The intern
   ...
   

   View Slide

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

    View Slide

11. WAT MET DE REST VAN DE WERELD
    

    View Slide

12. MICROSOFT
    Silverlight?
    Node.js voor Windows Server
    Internet Explorer & HTML5 support
    

    View Slide

13. ADOBE
    Flash voor Linux + Android?
    Acquires Phonegap, platform voor mobile apps met HTML5 +
    CSS + JS
    

    View Slide

14. JAVA
    JavaServer Faces (JSF)?
    JSF vs AngularJS
    

    View Slide

15. GOOGLE
    Google Web Toolkit?
    Enorm veel succes met AngularJS
    Dart
    

    View Slide

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
    

    View Slide

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
    

    View Slide

18. JFROG
    Gekend van Artifactory
    Nu ook voor Node.js packages
    

    View Slide

19. ANDERE
    EBAY - QL.IO PAYPAL - KRAKENJS
    

    View Slide

20. HOW DO WE DO IT?
    3 STAPPEN
    1.
    RESTIFY YOUR DATA
    2.
    FRONT-END HERWERKEN
    3.
    APPLICATION LIFECYCLE
    UITBREIDEN
    

    View Slide

21. RESTIFY YOUR DATA
    Business data via web services
    JSON of XML?
    Multi-channel approach (mobile?)
    Eenvoudige integratie met frameworks
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

28. DEMO
    APPLICATION LIFECYCLE: MAVEN & GRUNT
    

    View Slide

29. JAVASCRIPT IN INDUSTRY
    

    View Slide

30. THE END
    QUESTIONS?
    Mail:
    Twitter:
    Github:
    me@g00glen00b.be
    @g00glen00b
    g00glen00b
    NU ALLEMAAL SNEL DE UITSLAG VAN CHECKEN
    #COLCIV #WK2014
    

    View Slide