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
Tweet

More Decks by Henrique Vicente

Other Decks in Programming

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. Some time later Separation of concerns of content + style


    HTML + CSS Java applets, Flash JScript, JavaScript and, finally, ECMAScript
  3. Today 1000 ways of developing a web app JavaScript is

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

    support of Java, Flash Player, and, Silverlight on desktop browsers
  5. 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? …
  6. 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
  7. 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.
  8. 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?
  9. 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
  10. 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?
  11. The essential tool IDE vs. code / text editor
 


    IDEs:
 WebStorm (JetBrains)
 Eclipse, NetBeans
 …
 
 Source code editors:
 Sublime, TextMate
 vi (hard core)
 … Advantages? x Disadvantages?
  12. 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
  13. 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?
  14. 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
  15. 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
  16. 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