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

5733fd332f2a0da11931e0e73ddfb20d?s=128

Henrique Vicente

October 25, 2013
Tweet

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
  2. Once HTML Inline style Few or none programmatically control

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


    HTML + CSS Java applets, Flash JScript, JavaScript and, finally, ECMAScript
  4. ECMAScript Language created out of a need to make JavaScript

    more solid & a standard
  5. Today 1000 ways of developing a web app JavaScript is

    [always] on the client-side Trend: JavaScript on the server-side
  6. No exits Mobile web browsers usually only interpret JavaScript Decaying

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

  8. But eval() JS is evil

  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? …
  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
  11. None
  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.
  13. http://try.github.io/levels/1/challenges/1 http://octodex.github.com/labtocat/

  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?
  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
  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?
  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?
  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
  19. gs.statcounter.com

  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?
  21. CLI tools that you’ll learn to love

  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
  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
  24. None
  25. Testes automatizados!

  26. None
  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