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

Transcript

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
   HTML
   
   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,
   ECMAScript
   

   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
   JavaScript
   
   Decaying support of Java, Flash Player, and,
   Silverlight on desktop browsers
   

   View Slide

7. Some stats
   http://www.google.com/trends/explore?q=Flash#q=Flash%2C%20Java%20plugin%2C%20iOS%2C
   %20Android%2C%20app&cmpt=q
   
   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
   GitHub?
   
   …
   

   View Slide

10. MUST read specs and
    references to web
    developers
    ECMAScript 5 http://es5.github.io/
    
    HTTP/1.1 http://tools.ietf.org/html/rfc2616
    
    BrazilJS Weekly http://braziljs.org/ (in portuguese)
    
    Mozilla MDN

    https://developer.mozilla.org/en-US/docs/Web/JavaScript
    
    24ways.org (each December)
    
    The Art of Unix Programming by Eric S. Raymond

    http://catb.org/esr/writings/taoup/html/graphics/taoup.pdf
    

    View Slide

11. View Slide

12. Version control
    year <= 2005 → ‘use svn’;
    
    year > 2005 → ‘use git’;
    
    GIT Commit Good Practice

    https://wiki.openstack.org/wiki/
    GitCommitMessages
    
    Enjoy the command line?

    Node GH ftw.
    

    View Slide

13. http://try.github.io/levels/1/challenges/1
    http://octodex.github.com/labtocat/
    

    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)

    www.todomvc.com
    

    View Slide

16. Before writing some
    “jQuery” code...
    Don’t start using frameworks without having
    a basic understanding on how vanilla JS
    works
    
    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

    

    IDEs:

    WebStorm (JetBrains)

    Eclipse, NetBeans

    …

    

    Source code editors:

    Sublime, TextMate

    vi (hard core)

    …
    Advantages?
    
    x
    
    Disadvantages?
    

    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
    them)
    
    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…
    https://github.com/robbyrussell/oh-my-zsh
    Must Have Git Aliases: Advanced Examples
    
    durdn.com/blog/2012/11/22/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
    !
    HENRIQUE VICENTE
    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