Javascript vai resolver tudo mesmo?

Fala galera, meu nome é Diogo. E como proposto pelo Jean, vou falar um pouco mais sobre mim neste primeiro post.

Fui graduando de Engenharia de Software na UFG, porém tranquei o curso em busca de me “autodidatizar” (discussão que quero trazer pra outro post). Desde então tenho estudado vários assuntos, até que me descobri apaixonado pelo Frontend.

Sou desenvolvedor Frontend na Meta Tecnologia. Fã de conhecimento holístico. E curto muito ler quando não estou programando. Além de ter idéias horríveis todos os dias.


A “nova era” do desenvolvimento web

Bom, eu já tinha um post semi-pronto sobre Web Storage. Porém, um podcast¹ que eu escutei hoje (13/08) me inspirou a escrever esse post. E me fez pensar bastante sobre o seguinte assunto: “Estamos mesmo usando Javascript da forma certa?”

Desde 2006-07 com a popularização de bibliotecas como jQuery e YUI, até hoje em dia com a evolução destas para os frameworks MV* (model-view-whatever) como Angular, Ember, Backbone, ExtJS, fora o uso de JS no servidor. Muitas das atividades, antes designadas ao backend, foram transferidas para o frontend. Por vários motivos, tais como: facilidade de desenvolvimento, performance, menor consumo de banda, entre outras.

No podcast, Nicholas C. Zakas (@slicknet) comenta sobre esse crescimento da “cultura do javascript” e levanta 2 pontos importantes:

  1. JS é a melhor solução para o meu problema?

  2. Qual o peso de usar uma ou várias bibliotecas javascript? E o que fazer para diminuí-lo?
     

Entender o problema é a melhor solução

 

No primeiro ponto abordado, é discutida a real necessidade do uso de bibliotecas/frameworks JS nas aplicações. O entrevistado fala da “jqueryzação” do desenvolvedor, citando a frase: “Bom, eu tenho esse problema. Como eu vou usar jQuery pra resolvê-lo?”. Ele critica o modo com muitos desenvolvedores não estendem os limites impostos pelas bibliotecas usadas, como criar plugins, forks, etc.

Outro argumento utilizado é o de que já existem tecnologias que fazem as mesmas coisas, no backend, por exemplo. E que podemos usar de Progressive Enhancement (melhoria progressiva) com Javascript para melhorar a experiência do usuário.

Eu divirjo um pouco dessa opinião. Pois penso que essa cultura de estender as bibliotecas tem crescido bastante. Muito pelo fato de que o GitHub (a.k.a: presença open-source) dos desenvolvedores tem se tornado uma espécie de currículo na visão de muitas empresas.

Porém, concordo com o fato de que JS deve ter uma abordagem de Progressive enhancement². O fato de se ter uma stack toda em Javascript é bastante atraente e resolve boa parte dos problemas. Mas nem todos eles exigem uma baita interface rica, ou uma ótima performance. Ou seja, conforme a necessidade surgir, a solução deve ser implementada.
 

Optei por Javascript, e agora?

 

Um dos principais problemas que surgem quando usamos javascript, principalmente no browser, é o excesso de alternativas.

Por exemplo, hoje eu preciso de uma lib para navegar na DOM, amanhã de widgets, depois de promises, autocomplete, etc. Além do meu próprio código, que faz o projeto realmente funcionar. Chegará um dia em que eu terei arquivos demais, consequentemente mais tempo de carregamento.

Para melhorar esse problema de carregamento, o Nicholas fala sobre os quatro tempos de carregamento no browser (os quais você pode se aprofundar mais nos slides³ da palestra que ele deu sobre o assunto).

Dentre eles, o que mais me chamou a atenção é o quarto: “On demand”. Neste tipo de abordagem, nós devemos pensar em como o cliente usará a aplicação.

Um bom exemplo citado no podcast, é de uma página de produto da Amazon.

 

amazon

 

  • Qual deve ser o primeiro passo do usuário logo após ter aberto a página? (assumindo que ele veio de uma pesquisa)

  1. Prioritariamente o botão “Add to Cart”, pois, se o usuário gostar do produto, essa será a primeira ação a ser tomada.

  2. Se o usuário não quiser o produto, provavelmente ele vai querer fazer outra pesquisa. Então, por exemplo, o autocomplete da pesquisa, não precisa estar carregado junto com a página. Podemos atrasar um pouco seu carregamento.

  3. O botão “Sell on Amazon”, por ser menos usado, pode ter sua funcionalidade carregada quando o mouse estiver a uma certa distância dele, por exemplo.

Só neste pequeno exemplo, nós economizamos o carregamento de 2 scripts. A partir daí, nós podemos viajar e pensar melhor em outras formas de trazer o mínimo viável de arquivos para o funcionamento da página. Tudo isso com base no comportamento do usuário. Achei isso muito foda e pretendo usar nos meus próximos projetos.
 

Conclusão

Apesar de causar xiismo e polêmica em muitos casos. Acho muito válidas as discussões sobre o uso ou não das tecnologias. Pois muita gente defende muito tecnologias em si, e não a solução para o problema.

Pra quem tiver um bom nível de inglês eu recomendo que escute o podcast, pois há outras discussões que eu não citei aqui. E espero que vocês tragam suas opiniões nos comentários, para que a gente possa discutir melhor sobre o assunto.

 

Referências

¹ Hanselminutes #383: Enough With The JavaScript Already! with Nicholas Zakas?
² Progressive enhancement is still important
³ Enough with the Javascript already!

 

jQuery Boilerplate

Melhores da semana 2

A segunda edição dos melhores da semana aparece numa sexta feira pré dia dos pais e traz, entre outros, o Emmet LiveStyle, o MEAN e o novo layout do site do jQuery Boilerplate.

 

Emmet Live Style

emmet

Uma nova maneira de editar o seu CSS.

Eu ia postar o site do projeto, mas acredito que o artigo do Diego Eis será mais elucidatório e quem quiser ir mais a fundo é só ir no site do projeto, que também está no artigo do Diego.

http://tableless.com.br/emmet-livestyle/

 

Design para telas sensíveis ao toque

Artigo do Dani Guerrato que levanta alguns pontos interessantes sobre essa nova era das telas sensíveis ao toque.

http://tableless.com.br/design-para-telas-sensiveis-ao-toque/

 

An overview of the regular expression API

Uma visão geral da API de expressões regulares do JavaScript.

http://www.2ality.com/2011/04/javascript-overview-of-regular.html

 

jQuery Boilerplate

jQuery Boilerplate

Projeto para facilitar o pontapé inicial no desenvolvimento de plugins jQuery. Esse foi o primeiro projeto open source do Zeno Rocha e agora ganhou uma cara nova.

http://jqueryboilerplate.com/

 

MEAN (Mongo, Express, Angular, Node)

Um ponto de partida simples, escalável e fácil para aplicações centradas em JavaScript.

http://mean.io/

 

MockUPhone

Repositório de MockUps de dispositivos móveis.

http://mockuphone.com/

 

A Responsive Web Design Process

Nesse artigo o autor, Tristan L'Abbé, tentou juntar grande parte do conhecimento compartilhado na web sobre Design Responsivo e então ele decidiu propor um processo para o desenvolvimento de um design responsivo para a web.

http://heliom.ca/blog/posts/a-responsive-web-design-process

 

A guide to using Github Pages

GitHub logo

Aprensa a usar o GitHub Pages.

http://www.thinkful.com/learn/a-guide-to-using-github-pages/

 

Tablet Usability

Artigo que aborda a Usabilidade nos Tablets. Complementar ao artigo da Dani Guerrato no Tableless.

http://www.nngroup.com/articles/tablet-usability/

emmet

Emmet e a automatização no desenvolvimento

Olá, diante da promessa realizada pelo Jean no último post, venho antes de tudo me apresentar:

Bom, recentemente graduei na primeira turma de Sistemas de Informação da UFG, atualmente trabalho no LabTIME/UFG como desenvolvedor frontend e sou um dos sócios e desenvolvedores da Pequi Sistemas. Desenvolvo aplicações com Joomla há mais de 3 anos, entretanto, tenho me dedicado ultimamente em desenvolvimento frontend sem o framework, visto os requisitos dos últimos projetos da Pequi Sistemas e LabTIME/UFG.

O blog é um desafio grande, que me possibilitará compartilhar um poucos das soluções encontradas no decorrer dos trabalhos, mas também influenciará novos estudos que até então não ocorriam com certa periodicidade, é isso!

Automatização no desenvolvimento

Produtividade e automatização são palavras que caminham juntas no processo de desenvolvimento, entretanto, automatizar é um trabalho dispendioso, que exige estudos e experiência. Tratando-se de frontend, muitas vezes, criamos blocos/fragmentos que serão reutilizados e/ou importados no decorrer da aplicação. O artigo a seguir trata de um "kit de ferramentas" que foi criado para auxiliar no desenvolvimento, principalmente para os desenvolvedores que utilizam de HTML / XML e CSS.

O Emmet foi criado como Zen Coding, a princípio, um projeto proposto por Vadim Makeev em abril de 2009 e posteriormente desenvolvido por Sergey Chikuyonok, no mesmo ano. Após três anos de desenvolvimento o nome do projeto alterou-se para Emmet, não perdendendo nenhuma de suas características. 

Por que usar o Emmet?

  1. Sintáxe simples e intuitiva – http://docs.emmet.io/cheat-sheet/

  2. Documentação clara – http://docs.emmet.io/
  3. Plugin compatível com inúmeros editores: (ex: Eclipse, Netbeans, Brackets, Espresso, Coda, Sublime Text e outros)

Como usá-lo?

Atualmente eu tenho utilizado o Espresso (apenas para Mac) como editor, apesar de ser pago é uma ferramenta que cumpre com o que promete, logo é perceptível a leveza e simplicidade da ferramenta, atrelado a funcionalidades importantes como conexão SSH e FTP, mas editores para mac é assunto para outro post!

Visto que o Espresso não é multiplataforma, a seguir algumas instruções para instalação do plugin utilizando o editor Sublime Text 2 (download aqui).

Como instalar o Emmet no Sublime Text 2

  1. Abra Sublime Text 2;

  2. Acesse: Preferences > Browse Packages;

  3. Coloque dentro da pasta Installed Packages o arquivo de instalação do Sublime Package Control (download aqui) que servirá para instalar outros plugins que poderão ser necessários;

  4. Reinicie o Sublime Text 2;
  5. Acesse: Preferences > Package Control > Install Package;

  6. Busque por Emmet e reinicie, se for solicitado.

Comandos básicos

Em um arquivo html:

  • Digite: h1 (e pressione tab)
  • Resultado: 

    <h1><h1>
  • Digite: nav>ul>li*5 (e pressione tab)
  • Resultado:

    <nav>
    	<ul>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ul>
    </nav>
  • Digite: ! (e pressione tab)
  • Resultado:

    <!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	
    </body>
    </html>

Em um arquivo css

  • Digite: ml:10 (e pressione tab)
  • Resultado:

    margin-left: 10px;
  • Digite: bdrs:10 (e pressione tab)
  • Resultado: 

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    

Caracteres importantes e seus significados

  • # – Id ex: a#teste

  • . – class ex: a.teste

  • > – Filho ex: ul>li

  • + – Irmão ex: ul>li+li#segundo

  • ^ – Pai ex: p>span^span.destaque

  • {texto} – conteúdo da tag ex: a{texto}

Através destes pequenos exemplos podemos perceber o quanto o Emmet pode ser útil e simples no desenvolvimento de uma aplicação. Entretanto, por mais que tenhamos várias opções, dois aspectos devem ser destacados:

  • Todos os atalhos rementem a CSS, HTML e XML, logo outras tecnologias, previamente não podem ser atendidas;
  • A sua aplicação exigirá alguns trechos específicos/exclusivos

(Nestes casos, entra mais uma funcionalidade do Emmet).

Criando os próprios atalhos

No Sublime Text 2:

  • Acesse: Preferences  >  Browse Packages?;
  • Acesse o arquivo: Packages > Emmet > Emmet.sublime-settings.

No arquivo existirá o seguinte exemplo:

"snippets": {
		// "html": {
		 //	"abbreviations": {
		 //		"example": "<div class='example' title='Custom element example'>"
		 //	}
		 //}
	},

Este é um exemplo que ao ser descomentado, poderá ser testado:

  • Digite: example
  • Resultado: <div class='example' title='Custom element example'>

Para criar fragmentos próprios replique todo o trecho e edite, a seguir um exemplo de condicional JSP:

"snippets": {
		 "html": {
		 	"abbreviations": {
		 		"cursor": "<core:if test='${teste = teste}'></core:if>"
		 	}
		 }
	},

Conclusão

Atender os prazos estipulados pelos clientes é quase sempre uma tarefa árdua. Visto isso, as técnicas de modularização somadas as ferramentas que automatizam o desenvolvimento tornam-se imprescindíveis para um desenvolvimento ágil, a fim de atender as demandas.

2013-07-30-ambient-light-events

Melhores da semana #1

E é com esse nome bem clichê que eu inauguro essa seção do nosso recém formado blog. Aqui, como o nome já diz, iremos compartilhar o que rolou de melhor na semana, conteúdo esse que poderá ser de fontes nacionais ou não.

Enfim, vamos ver o que rolou de bom essa semana:

 

Twitter Bootstrap 3.0 RC1

Essa semana o lançamento da primeira versão Release Candidate desse já famoso framework frontend.

http://getbootstrap.com/

 

JavaScript: Entendendo o this

Artigo do Davi Pereira que explica de forma clara e objetiva como o this funciona.

http://tableless.com.br/javascript-entendendo-o-this/

 

Ambient Light Events

Experimento criado pelo Caio Gondim abordando os Ambient Light Events.

http://loopinfinito.com.br/2013/07/30/ambient-light-events/

 

Rocket

Rocket

O Rocket consiste em uma técnica para criar aplicações em tempo real utilizando Web Services REST.

http://rocket.github.io/

 

Techniques for mobile and responsive cross-browser testing: An Envato case study

Este artigo aborda alguns métodos e ferramentas utilizados pela Envato com foco em testes para dispositivos móveis.

http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/

 

Redesigning the Credit Card input

Belo trabalho que recria um verdadeiro cartão de crédito em formulários através da personalização do input. Obtendo um resultado skeumórfico bem interessante.

http://kenkeiter.com/2013/07/21/redesigning-credit-card-inputs/

 

JavaScript Powered Arduino with Johnny-Five

Um exemplo do que pode ser feito com Node.js, Johnny-Five e Arduino.

http://blog.safaribooksonline.com/2013/07/16/javascript-powered-arduino-with-johnny-five/

 

7 JavaScript Basics Many Developers Aren't Using (Properly)

Algumas dicas para os desenvolvedores javascript.

http://tech.pro/tutorial/1453/7-javascript-basics-many-developers-aren-t-using-properly

 

Object playground

Um site fantástico onde você pode "visualizar" a orientação a objetos com base no javascript.

http://www.objectplayground.com/

 

It's a Mad, Mad, Mad, Mad World: Scoping in CoffeeScript and JavaScript

Uma introdução ao CoffeeScript.

http://raganwald.com/2013/07/27/Ive-always-been-mad.html

 

Macaw

Ferramenta para, literalmente, desenhar sites e ainda promete um código limpo e otimizado.

http://macaw.co/

 

PSD.rb

Biblioteca Ruby para manipulação de arquivos PSD (Photoshop).

http://layervault.tumblr.com/post/56891876898/psd-rb

 

Extra: VMUX

Esse daqui foi descoberto por mim na semana passada, mas eu não poderia deixar de citá-lo. Ele é um projeto open-source desenvolvido com o Node.js para realizar video chamadas através do browser.

http://vmux.co/