Versão 3.0.0

This is the 3.0.0 release.
Portuguese description changelog below.

---

Hoje nós lançamos a versão 3.0.0 do Locaweb Style. É um release gigante, com uma série de modificações e 3 meses de trabalho. É a maior mudança do framework até agora e temos muitas novidades. Foram mais de 2170 commits na versão que apelidamos carinhosamente de Barbecue.

Bye bye Bootstrap

Retiramos o Bootstrap nessa nova versão. Isso garantiu a perda do peso do Locaweb Style, ficando mais leve e muito mais controlável. Agora desenvolvemos apenas o que iremos precisar, prevenindo a criação de código legado e não usado.

Mas não fique triste. Nós amamos o Bootstrap. Nós escolhemos ele como a base das nossas primeiras versões porque o amamos de paixão. Mas tínhamos um problema sério: o design do Bootstrap não era o mesmo design que usamos em nossos painéis. Isso causava a necessidade de reconstruir a interface da maioria dos elementos do Bootstrap, reescrevendo CSS e algumas vezes estendendo funções JavaScript. O pensamento que tivemos foi: já que estamos praticamente recriando cada elemento, por que não fazermos do zero?

Foi aí que a decisão de retirar o Bootstrap fez sentido. Com essa decisão, também nos livramos da dependência das atualizações do Bootstrap. Já tivemos problemas com a mudança do markup em novas verões do Bootstrap. Essa dependência nunca foi boa e para nós é muito custoso.

A única coisa que mantivemos do Bootstrap foi o Grid. Não valia a pena fazermos um novo Grid (acredite, houve discussões acaloradas na equipe pra que isso acontecesse) para ter as mesmas características e possibilidades do Grid do Booststrap, por isso, ele ainda está no core do Locaweb Style.

JavaScript mais modular

Todo o JavaScript e o CSS agora são realmente modulares. Isto é, cada componente criado é um componente independente e seu comportamento pode ser iniciado isoladamente. Isso facilita a manutenção e a detecção de problemas.

Outra vantagem é que dessa forma nossas funções ficaram mais performáticas. Funciona assim: o nosso inicializador detecta os módulos na tela e inicializa apenas os módulos usados ali. Simple like that.

Mobile First

Todos os componentes e comportamentos do Locaweb Style são planejados primeiro em telas menores para as maiores, priorizando as ações e os conteúdos importantes e a partir daí adaptando para as telas maiores.

A ideia do Mobile First é atraente. O que ninguém fala é que o processo de criação e de produção muda totalmente. Foi uma quebra de paradigma para a equipe de UX e Front-End que trabalharam no Locaweb Style.

É claro que há momentos que precisamos ceder. Existem sistemas complexos, como o nosso produto de Email Marketing, onde o usuário pode criar e customizar templates de email. Essa tarefa é melhor executada a partir de um desktop, com um monitor que tenha espaço suficiente para trabalhar. Por isso, não vamos disponibilizar tarefas complexas, que talvez frustaria o usuário em vez de ajudá-lo.

A ideia é que o usuário não tenha que aprender a usar a interface dependendo do dispositivo ou da tela que ele está utilizando. Um dos princípios que usamos é que o usuário precisa executar todas as tarefas ou pelo menos 99% em qualquer dispositivo. Para isso, precisamos adaptar todos os componentes para que a experiência do usuário seja o mais uniforme possível entre as plataformas. Foi isso que fizemos e estamos fazendo com o Locaweb Style Barbecue.

Elementos Adaptativos

Alguns módulos de interface podem se adaptar dependendo do dispositivo e do tamanho da tela. Comportamentos também são padronizados para garantir maior uniformidade entre dispositivos.

Adaptar interfaces é algo muito difícil de fazer. O Responsive Web Design faz um bom trabalho quando se trata de adaptar a estrutura do layout para os vários tamanhos de tela. Mas o Responsive é pouco eficaz quando se trata de adaptação de componentes. Alguns componentes precisam ser "transformados" dependendo do contexto. Fizemos isso com alguns elementos de forma automática, sem prejudicar a performance da página e sempre mirando na boa experiência do usuário. Logo, o usuário terá todos os botões, todo o conteúdo, toda experiência do produto em qualquer dispositivo que usar.

Poucas dependências

A única dependência do Locaweb Style é a utilização da jQuery.
Retiramos a dependência do Bootstrap para ganharmos mais liberdade de criação e desenvolvimento. Retiramos o Modernizr porque não estávamos usando para absolutamente nada. Retiramos o jQuery Validator.
Agora você usa o Modernizr se precisar. Usa o plugin de validação de formulários que quiser. Não há mais a necessidade de se preocupar com as dependências. Apenas a jQuery, que você baixa a versão que achar melhor.

Prefixos em IDs e classes

Notamos que ao integrar o Locaweb Style em projetos que já continham algum código CSS, acontecia de haver conflitos com nomes de classes e estilos. Por isso adotamos a boa prática de inserir um prefixo em todos os nomes usados no Locaweb Style. O nosso prefixo agora é o ls-. Por isso, se você ver qualquer classe, ID, atributos data que tem um ls- saiba que é do Locaweb Style. Assim você fica livre para criar suas próprias classes e a integração do nosso framework em seu projeto será bastante tranquila.

Atomic Design

Além do Mobile First, a interface inteira do Locaweb Style é produzida tendo em mente a ideia do Design Atômico, onde cada componente é um átomo, que quando integrados formam moléculas, depois organismos que formam templates e por fim as páginas. A vantagem disso é que cada átomo pode ser atualizado de forma independente, assim qualquer outro componente não é afetado diretamente.

Frequencia de atualizações

Semanalmente atualizamos o Locaweb Style, com pequenas atualizações de features e resolução de bugs. A ideia é sempre facilitar o uso por designers e desenvolvedores back-end. Se você quiser atualizar toda semana, fique à vontade, é o nosso recomendado.

Nós adotamos o versionamento no padrão do SemVer, logo você consegue prever quando há uma atualização pequena ou grande.

Download via BOWER

Inserimos o Locaweb Style no Bower, que é um gerenciador de dependências front-end criado pelo Twitter e que é usado no mundo todo.

Vantagens para o usuário

Claro, isso tudo não seria valioso se o usuário não tivesse vantagens. Aqui vão algumas dessas vantagens:

Consistência entre os dispositivos

Desde a primeira versão não tinha nenhum princípio adaptivos nenhum, dificultado o uso em qualquer outro dispositivo que não fosse um desktop.

Na versão Barbecue todas as interações, fluxos de navegação (tanto na tela quanto entre as páginas) e os comportamentos da interface, são similares em todos os dispositivos acessados. A interface e seus módulos são adaptativos, melhorando as experiências para cada dispositivo quando necessário.

Maior priorização de conteúdo

Por causa da mudança total do design, adequando toda a interface para um layout mais moderno e agradável, o usuário ganhou uma área muito maior para interagir com o painel do produto. O conteúdo abrange toda a tela do usuário, mantendo a experiência de uso muito mais confortável.

O problema da versão antiga do Locaweb Style era a limitação de espaço, tanto na horizontal quanto na vertical. Já estávamos sofrendo aqui na Locaweb, em alguns painéis, por não termos espaço para incluir mais uma opção no menu.
Por causa da limitação de largura, nós empilhávamos muitos elementos, sofrendo com a diagramação da página.

Conteúdo bem pensado

O conteúdo foi planejado para ter uma linguagem clara e direta, facilitando o entendimento do usuário independente do dispositivo usado.

Não há textos gigantes, nem instruções infinitas. Todo o conteúdo é pensado para que seja lido facilmente em qualquer dispositivo.

Navegação clara e concisa

Com essa remodelação de design e princípios de uso, os painéis foram modificados para que o fluxo de uso seja mais linear. Anteriormente as páginas guardavam muitas informações agrupadas e empilhadas em elementos como collapses e listagens. Agora, com a barra lateral, é possível linkar páginas diretamente, sem a necessidade de páginas pedágio ou empilhamento de informações.

Maior flexibilidade para evolução dos produtos

Com a versão anterior do Locaweb Style, o menu tinha uma limitação de espaço por ser um menu horizontal. Em alguns produtos não havia a possibilidade de adicionar mais opções no menu por causa dessa limitação. Havia também outro problema com a exibição das informações. Com a largura da área do produto limitada, havia o problema de empilhar informações e agrupá-los para que a página não ficasse muito longa.

Performance

80% da performance de um produto ou website é de responsabilidade do front-end. A interface, a retirada das dependências, a retirada do Bootstrap, a modularização dos componentes JavaScript e CSS, markup e várias outras boas práticas foram aplicadas para que a performance seja melhorada no Locaweb Style.