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

Web application development tips

Web application development tips

Talk about software development on a local university forum.
Original: https://speakerdeck.com/henvic/web-application-development-tips
Portuguese: https://speakerdeck.com/henvic/desenvolvendo-uma-aplicacao-web

Henrique Vicente

October 25, 2013

More Decks by Henrique Vicente

Other Decks in Programming


  1. Web application
    development tips
    H e n r i q u e V i c e n t e
    h t t p : / / h e n v i c . g i t h u b . i o

    View Slide

  2. Once

    Inline style

    Few or none programmatically control

    View Slide

  3. Some time later
    Separation of concerns of content + style

    HTML + CSS

    Java applets, Flash

    JScript, JavaScript and, finally,

    View Slide

  4. ECMAScript
    Language created out of a need to make
    JavaScript more solid & a standard

    View Slide

  5. Today
    1000 ways of developing a web app

    JavaScript is [always] on the client-side

    Trend: JavaScript on the server-side

    View Slide

  6. No exits
    Mobile web browsers usually only interpret

    Decaying support of Java, Flash Player, and,
    Silverlight on desktop browsers

    View Slide

  7. Some stats

    Date not 100% bullet-proof

    View Slide

  8. But eval() JS is evil

    View Slide

  9. Where can I start?
    Read the ECMAScript specs?

    RFC 2616 - HTTP/1.1?

    Version control?

    Automated tests, code quality?

    Test-Driven Development?

    Cyclomatic complexity?

    Forking and pulling requests repos on open source projects on

    View Slide

  10. MUST read specs and
    references to web
    ECMAScript 5 http://es5.github.io/

    HTTP/1.1 http://tools.ietf.org/html/rfc2616

    BrazilJS Weekly http://braziljs.org/ (in portuguese)

    Mozilla MDN


    24ways.org (each December)

    The Art of Unix Programming by Eric S. Raymond


    View Slide

  11. View Slide

  12. Version control
    year <= 2005 → ‘use svn’;

    year > 2005 → ‘use git’;

    GIT Commit Good Practice


    Enjoy the command line?

    Node GH ftw.

    View Slide

  13. http://try.github.io/levels/1/challenges/1

    View Slide

  14. Let’s roll
    Is there anything to help me develop a web
    app faster, better, and easer?

    Frameworks, libraries? What do we have?

    Generators? Examples?

    View Slide

  15. Great comparison web site where you can see

    a simple to-do list app built

    with different tool sets like

    function libraries,

    frameworks, and,

    vanilla JS (or pure JS)


    View Slide

  16. Before writing some
    “jQuery” code...
    Don’t start using frameworks without having
    a basic understanding on how vanilla JS

    Then, use whatever you want to make your
    work more valuable: do re-use code

    But before writing JS:

    Can’t CSS do what you want better?

    View Slide

  17. The essential tool
    IDE vs. code / text editor


    WebStorm (JetBrains)

    Eclipse, NetBeans


    Source code editors:

    Sublime, TextMate

    vi (hard core)




    View Slide

  18. Use metrics to determine
    what you should produce
    Don’t produce for IE 6 or older browsers: not
    worth it

    Consider the accessibility / the visual
    impaired (unless you’re designing a photo
    sharing web service and even so… consider

    Always use metrics to evaluate risks and to
    see the options and its consequences clearer

    View Slide

  19. gs.statcounter.com

    View Slide

  20. A better terminal…
    Must Have Git Aliases: Advanced Examples

    iTerm 2
    You do use the CLI (command-line interface), right?

    View Slide

  21. CLI tools that you’ll
    learn to love

    View Slide

  22. Installing...
    Download NodeJS at www.nodejs.org

    Install it, then open your console and install

    the other tools:

    Yeoman: npm install -g yo

    Grunt CLI: npm install -g grunt-cli

    Bower: npm install -g bower

    View Slide

  23. Yeoman + AngularJS
    Let’s create a example app with a Yeoman
    AngularJS generator?

    First, install the generator

    npm install -g generator-angular

    Then: yeoman angular

    View Slide

  24. View Slide

  25. Testes automatizados!

    View Slide

  26. View Slide

  27. henvic.github.io
    T a l k a v a i l a b l e a t
    h t t p s : / / s p e a k e r d e c k . c o m /
    h e n v i c / w e b - a p p l i c a t i o n -
    d e v e l o p m e n t - t i p s

    View Slide