$30 off During Our Annual Pro Sale. View Details »

Fronteers - JavaScript at your enterprise (Dutch)

Fronteers - JavaScript at your enterprise (Dutch)

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

Dimitri

June 19, 2014
Tweet

More Decks by Dimitri

Other Decks in Programming

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:
    [email protected]
    @g00glen00b
    g00glen00b
    NU ALLEMAAL SNEL DE UITSLAG VAN CHECKEN
    #COLCIV #WK2014

    View Slide