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

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