Web Tooling - September 2012

Talk about tooling requirements for medium to large web projects with a mixture of JavaScript, CSS and other assets.

Transcript

1. Web Tooling
   September 1st 2012 @ NConf
   

   View Slide

2. Sebastian Werner
   @wpbasti
   sebastian-werner.net
   

   View Slide

3. Software Developer
   Schlund + Partner
   1&1
   studiVZ
   Deutsche Telekom
   Zynga Germany
   2002-2003
   2004-2008
   2008-2009
   2009-2011
   2011-2012
   Karlsruhe - Berlin - Darmstadt - Frankfurt
   

   View Slide

4. Open Source
   qooxdoo
   Unify
   Core
   Jasy
   Scroller
   API Browser
   

   View Slide

5. Topics
   JavaScript
   Python
   Tooling
   UX
   Publishing
   Mobile
   Twitter
   Apple
   

   View Slide

6. Content
   JavaScript, CSS, HTML, Graphics, Audio, Video
   

   View Slide

7. Bundle & Compress
   

   View Slide

8. Unfortunately some
   Bad News
   

   View Slide

9. It‘s not that easy!
   

   View Slide

10. Let‘s start positive...
    

    View Slide

11. Solved
    JavaScript Compression
    Uglify
    Closure Compiler
    YUI Compressor
    

    View Slide

12. Solved
    CSS Pre-Processors
    Less
    Sass
    Stylus
    

    View Slide

13. Solved
    Image Optimizers
    PNGQuant
    OptiPNG
    ImageOptim
    

    View Slide

14. Solved
    Testing
    QUnit
    Jasmine
    Mocca
    PhantomJS
    

    View Slide

15. Solved
    Linting
    JS Hint
    

    View Slide

16. Imagine
    ...your application uses an IconManager to access a
    single icon markup by its resource name...
    

    View Slide

17. ...this class is implemented in CoffeeScript
    offered by shared library you are using...
    

    View Slide

18. ... it uses a CSS file to include
    icons via background image...
    

    View Slide

19. ...which refers to icons in your official icon pool...
    

    View Slide

20. ...icons should only be deployed
    if they are actually used by your application...
    

    View Slide

21. ...and combined into a sprite sheet for optimal
    transmission to the browser...
    

    View Slide

22. ...and by the way: the icon quality depends
    on the actual device the visitor is using...
    

    View Slide

23. Urgh
    

    View Slide

24. The Initiative
    

    View Slide

25. 1.
    Project IDs
    Globally known unique identifier for every project
    

    View Slide

26. 2.
    Project Dependencies
    Path Normalization
    Auto Cloning
    Duplication Handling
    

    View Slide

27. 3.
    File Identifiers
    Matching exported symbol
    

    View Slide

28. 4.
    Auto Dependencies
    myapp/Main.js
    uses
    sharedlib/IconManager.js
    uses
    iconpool/save.png
    

    View Slide

29. 5.
    Asset Workflow
    URL Free
    Image Sprites
    Images Animations
    Optimizing Images
    Compressing CSS
    Inlining Externals
    

    View Slide

30. 6.
    Localization
    Date Formats
    Number Formats
    Calendar Rules
    Plural Rules
    Overhead Free
    

    View Slide

31. 7.
    Translations
    Gettext / ICU
    Plural Support
    Placeholders
    Sync Implementation
    

    View Slide

32. 8.
    Pre Processing
    Traceur / CoffeeScript
    Sass / Less / Stylus
    Handlebars / Mustache
    

    View Slide

33. 9.
    Deployment
    Self Contained
    Checksummed Output
    Publish/Sync to CDN
    Cache Manifests
    3rd Party Integration
    

    View Slide

34. 10.
    Web Server
    During Development
    Proxying Remotes
    Easy to Configure
    

    View Slide

35. 11.
    Packages
    Fast Start
    Load on Demand
    Semi Automatically
    Translations
    Asset Data
    

    View Slide

36. 12.
    Permutations
    Devices
    Locales
    Languages
    Feature Sets
    Styles
    Settings
    

    View Slide

37. 13.
    Documentation
    Cross Project
    DRY
    Markdown
    

    View Slide

38. 14.
    Scaffolding
    Boilerplate
    Customization
    Download Free
    

    View Slide

39. 15.
    Finally
    Cross Platform
    Consistent
    Scriptable
    Extendable
    Hackable
    

    View Slide

40. The Jasy Initiative
    Tool For Modern Web Development
    

    View Slide

41. Two Years of Development
    About
    Initiator
    Owner
    Contributor
    Sebastian Werner
    Zynga Germany
    Deutsche Telekom
    

    View Slide

42. Python 3
    Spriting Engine
    Image Meta Data
    Dependencies
    JavaScript Parser
    Class Sorter
    Development Version
    Self Contained
    Unique IDs
    Git Auto Cloning
    Powerful Scaffolding
    Cross Platform
    Integrated Web Server
    Fully Scriptable
    Easily Extendable
    API Generator
    JavaScript Compressor
    Image Animations
    CDLR Localization Gettext Translation
    Efficient Binary Cache
    Markdown
    JSON or YAML Permutations
    File Loaders
    Multi Project
    

    View Slide

43. Jasy 0.8
    Will be released end of September
    Currently at 0.8-beta2
    http://zynga.github.com/jasy
    

    View Slide

44. Some Todos
    Asset Workflow (Processing / Optimizing)
    Pre-Processing Code / Templates
    Synchronization for Translations
    Automatic Code Packaging
    Testing / Lint Integration
    

    View Slide

45. Thank You
    @wpbasti
    sebastian-werner.net
    http://zynga.github.com/jasy
    

    View Slide