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

Once HTML Inline style Few or none programmatically control

Some time later Separation of concerns of content + style
 HTML + CSS Java applets, Flash JScript, JavaScript and, finally, ECMAScript

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

Today 1000 ways of developing a web app JavaScript is [always] on the client-side Trend: JavaScript on the server-side

No exits Mobile web browsers usually only interpret JavaScript Decaying support of Java, Flash Player, and, Silverlight on desktop browsers

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

But eval() JS is evil

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? …

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

No content

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.

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

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?

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

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?

The essential tool IDE vs. code / text editor
 
 IDEs:
 WebStorm (JetBrains)
 Eclipse, NetBeans
 …
 
 Source code editors:
 Sublime, TextMate
 vi (hard core)
 … Advantages? x Disadvantages?

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

gs.statcounter.com

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?

CLI tools that you’ll learn to love

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

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

No content

Testes automatizados!

No content

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