Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tooling For The Modern WebApp Developer

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.

Addy Osmani

November 30, 2012
Tweet

More Decks by Addy Osmani

Other Decks in Programming

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