Tooling For The Modern WebApp Developer

HTML version: http://dl.dropbox.com/u/70775642/talks/tooling/dotjs/index.html

The Breakpoint:
http://www.youtube.com/playlist?list=PLVUliVBcvz1n_DOgB4lb06G_Dc5fQVRRv&feature=view_all

A talk about improving developer workflow. Learn about new experimental features in the Chrome Developer Tools, brand new features in text editors, command line tools, live reload, Yeoman and more.

Transcript

1. View Slide

2. #dotjs 3/35
   

   View Slide

3. In-browser DevTools
   #dotjs
   Constantly evolving
   Use Canary channel for development
   Lots of juicy experimental features
   -
   -
   -
   4/35
   

   View Slide

4. Performance: Timeline + Frames view
   #dotjs
   Timeline gives you an overview of memory usage over time
   Summary and detailed views
   Helps remove jank. Layout or scripts - who triggered what?
   Frames view helps achieve that snappy 60fps you ideally want
   -
   -
   -
   -
   5/35
   

   View Slide

5. Finding memory leaks and DOM leaks
   #dotjs
   JavaScript, CSS, Heap snapshot Profiles
   What is using memory at a given point in time? Not being GC'd?
   Use comparison view to identify potential memory leaks
   Use summary view to identify DOM leaks
   -
   -
   -
   -
   6/35
   

   View Slide

6. A better authoring workflow
   #dotjs
   Live Edit
   Snippets
   Revision history
   AutoSave
   -
   -
   -
   -
   7/35
   

   View Slide

7. Live reloading + SASS Source Maps
   #dotjs
   Editing compiled CSS has little value
   Enable new SASS hotness
   BOOM! You can edit SASS source files
   Changes automatically reload
   -
   -
   -
   -
   8/35
   

   View Slide

8. CoffeeScript + @sourceURL
   #dotjs
   Compile your Coffee sources
   Open up the DevTools
   Review your compiled file
   Whoa! sourceURL comments
   -
   -
   -
   -
   9/35
   

   View Slide

9. Mobile Debugging: Overrides Panel
   #dotjs
   User Agent
   Device Metrics
   Geolocation
   Orientation
   Emulate touch events
   -
   -
   -
   -
   -
   10/35
   

   View Slide

10. DevTools Console
    #dotjs
    Styled-console
    Multi-style support
    inspect() command
    -
    -
    -
    11/35
    

    View Slide

11. Learn to love the command line.
    It isn't scary.
    ~ Stephen Hay
    #dotjs 12/35
    

    View Slide

12. Command-line
    #dotjs
    Make it look hot
    fi.
    Capture and replay your command line history
    DOTFILE EVERYTHING (mine)
    Aliases are awesome
    Our faves: g
    z , s
    e
    r
    v
    e
    r alias and n
    y
    Some for Browserstack: win7ie8, win8ie10, ios3
    -
    -
    -
    -
    -
    -
    13/35
    

    View Slide

13. Sublime Text #protips
    #dotjs
    Run JavaScript From Your
    Editor In The Browser
    Use the built-in Build System!
    Zen coding with Emmet
    Stack Overflow code search
    Snippets for frameworks
    -
    -
    -
    -
    -
    14/35
    

    View Slide

14. Finding missing semicolons should never be a
    manual process.
    

    View Slide

15. Linting
    #dotjs
    On file save
    On source
    control commit
    At build time
    Anything better?
    -
    -
    -
    -
    16/35
    

    View Slide

16. Live feedback
    #dotjs
    Linting
    Reload
    Recompilation
    -
    -
    -
    17/35
    

    View Slide

17. WebStorm
    #dotjs
    Live Edit + Chrome
    JS Language version based
    suggestions
    Code inspection and zen
    coding
    Suggestions for DRYer code
    Built in code linting
    and more
    -
    -
    -
    -
    -
    -
    18/35
    

    View Slide

18. Unit Testing In The Cloud
    Testing approaches you already know:
    New hotness:
    #dotjs
    In the browser
    In a headless browser on-demand via cmd line: g
    r
    u
    n
    t q
    u
    n
    i
    t
    In a headless browser post-push
    -
    -
    -
    In multiple browsers in the cloud via cmd line:
    -
    b
    u
    n
    y
    i
    p -
    f M
    o
    d
    e
    r
    n
    i
    z
    r
    /
    t
    e
    s
    t
    /
    i
    n
    d
    e
    x
    .
    h
    t
    m
    l -
    c ~
    /
    b
    u
    n
    y
    i
    p
    /
    c
    o
    n
    f
    i
    g
    .
    j
    s -
    b i
    o
    s
    b
    u
    n
    y
    i
    p -
    f i
    n
    d
    e
    x
    .
    h
    t
    m
    l l
    o
    c
    a
    l -
    l "
    f
    i
    r
    e
    f
    o
    x
    |
    c
    h
    r
    o
    m
    e
    |
    s
    a
    f
    a
    r
    i
    |
    p
    h
    a
    n
    t
    o
    m
    j
    s
    "
    19/35
    

    View Slide

19. Build system
    Lint. Resolve depenencies. concatenate modules. compile. Flatten
    your CSS @
    i
    m
    p
    o
    r
    t
    s. Remove debugging statements. Compress
    images. Precompile templates. Run tests in a variety of
    environments. Revs asset paths for caching. Affirm code quality.
    

    View Slide

20. New hotness: Grunt.js
    #dotjs 21/35
    

    View Slide

21. Grunt.js:
    #dotjs
    Task based command line
    build tool
    Alternative to
    Rake/Cake/Make/Jake
    Rich community of build tasks
    Generates simple skeleton for
    new projects
    Lint, test, concat, watch and
    min out of the box.
    however..you're still responsible for workflow
    -
    -
    -
    -
    -
    -
    22/35
    

    View Slide

22. #dotjs
    so much choice! you want flexibility.
    how could we make this any easier?
    23/35
    

    View Slide

23. Introducing Yeoman
    #dotjs 24/35
    

    View Slide

24. Go from idea to a rough prototype in 10 min
    

    View Slide

25. Limit the time spent on writing boilerplate for
    your app
    

    View Slide

26. Automate as much of your workflow as possible
    

    View Slide

27. Yeoman
    #dotjs
    Authoring abstractions
    Scaffolds
    Linting
    LiveReload
    Testing
    Build tools
    and more.
    -
    -
    -
    -
    -
    -
    -
    -
    -
    28/35
    

    View Slide

28. Built on top of great tools like Grunt and Bower
    #dotjs 29/35
    

    View Slide

29. Walkthrough
    #dotjs
    1. Package management
    2. Generators
    3. Live Reload
    4. Testing
    5. Build system
    30/35
    

    View Slide

30. What's next?
    #dotjs 31/35
    

    View Slide

31. Yeoman in 2013
    #dotjs
    1. Improved flexibility with tools (Grunt, Bower)
    2. Better editor integration
    3. Support for backends (Rails, PHP)
    4. Better mobile helpers and remote debugging
    5. Support for all of JS.next (Traceur)
    6. Deployment (Heroku, AppEngine)
    7. ..plans for a little more
    32/35
    

    View Slide

32. Yeoman 0.9.5 Just Launched!
    #dotjs
    Visit yeoman.io
    -
    33/35
    

    View Slide

33. Learn to love your workflow and tools
    #dotjs 34/35
    

    View Slide

34. g+ addyosmani.com/+
    twitter @addyosmani
    www addyosmani.com
    github github.com/addyosmani
    #dotjs
    Thank you!
    35/35
    

    View Slide