Workflow Open Source para Frontend Developers

21 de jul. de 201316 gostaram1,694 visualizações

O documento discute a evolução do workflow de desenvolvimento frontend ao longo do tempo, desde a era do Dreamweaver e HTML com tabelas até as ferramentas, frameworks e padrões atuais. Também apresenta diversas ferramentas como editores de código, sistemas de controle de versão, task runners e ferramentas de qualidade de código que podem ser usadas para tornar o desenvolvimento frontend mais eficiente.

WORKFLOW
OPENSOURCE
PARA FRONTEND
DEVELOPERS
por davidson fellipe
www.fellipe.com

http://www.oldversion.com/windows/macromedia-dreamweaver/
E AINDA...

SEMÂNTICA
FERRAMENTAS
FRAMEWORKS
LIBRARIES
PRÉ
PROCESSADORES
SEO
TESTES
PADRÕES
WEB

MULTITASKING...
@flavioribeiro na globo.com

Workflow Open Source para Frontend Developers

VIM
http://www.vim.org/

SUBLIME
http://www.sublimetext.com/

SUBLIME
http://www.sublimetext.com/
NÃO É OPEN SOUCE
NEM FREE

BRACKETS
http://brackets.io/

DOTFILES.GITHUB.IO
http://dotfiles.github.io/

automatize suas
configurações
https://github.com/davidsonfellipe/dotfiles

git
trabalhar com repositórios
entender branches
pull request
code review
CONTROLE DE VERSÃO

https://bitbucket.org/

https://github.com/

BITBUCKET VS GITHUB
repos privados
ilimitados
princing baseado no
número de
colaboradores
número de
colaboradores ilimitado
princing baseado no
número de
colaboradores

http://gruntjs.com/

O QUE É O GRUNT?
É um task runner baseado em linha de comando
para projetos javascript

O QUE É O GRUNT?
Testes
JS linting
Concatenando e Minificando
Otimizando imagens
Watches para Pré-processadores

Por que usar o GRUNT?
Facil de usar
Grande número de plugins
Imensa comunidade
Open source

Instalados e gerenciados via NPM (node.js)
Adiciona grunt command no system path
INICIANDO COM GRUNT
$ npm install -g grunt-cli

package.json
{
"name": "project-name",
"version": "0.1.0",
"description": "Project description"
}

gruntfile.js
module.exports = function( grunt ) {
grunt.initConfig({
// configuracoes
});
//plugins
grunt.loadNpmTasks( 'plugin-name' );
//tarefas
grunt.registerTask( 'default', [ 'watch' ] );
};

INSTALANDO GRUNT
$ npm install grunt --save-dev
Instala a ultima versão no seu folder
Adiciona ao package.json

ANT
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

RAKE
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

GRUNT
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

http://usablica.github.io/front-end-frameworks/compare.html

JSHINT
http://www.jshint.com/

CSSLINT
http://csslint.net/

YSLOW
http://developer.yahoo.com/yslow/

PAGE SPEED
https://developers.google.com/speed/pagespeed/insights

+PERFORMANCE?
http://browserdiet.com/pt

SPEEDLIMIT
http://mschrag.github.io

GRADIENTES?
http://www.colorzilla.com/gradient-editor/

GITIFIER
http://psionides.github.io/Gitifier/

IMAGEOPTIM
http://imageoptim.com/

MICROJS
http://microjs.com/#

http://html5boilerplate.com/

CONTRIBUA
http://braziljs.org/projetos/
http://contribute.jquery.org/
http://gruntjs.com/contributing
Pull requests em projetos no github ou bitbucket

https://twitter.com/slicknet/status/292103833327370240

http://html5weekly.com/

http://javascriptweekly.com

http://braziljs.org/

O SUCESSO DE SUA APP
NÃO DEPENDE APENAS
DE SEU WORKFLOW

OBRIGADO
github.com/davidsonfellipe
twitter.com/davidsonfellipe
facebook.com/fellipe
fellipe.com

www.fellipe.com/talks
slides disponíveis em...

Recomendados

Ruby on Rails em 30 minutosGuilherme Vinicius Moreira

Compartilhamento de código com Frameworks - CocoaHeads RJRenan Protector

Talk realizado no CocoaHeads RJ em 26/03/2015 Criar seu próprio framework parece ciência de foguete mas é muito fácil. A apresentação mostra algumas dicas de como criar seu primeiro framework para compartilhar código entre suas aplicações. As aplicações de framework são muitas: Utilizar framework compartilhando código entre a "app pai" e seus filhos (extensions, today widget, etc) Compartilhar código para aplicativos white label Compartilhar tecnologia com terceiros etc..

It's Javascript TimeDavidson Fellipe

O documento apresenta uma introdução ao JavaScript, destacando sua popularidade e aplicações tanto no frontend quanto no backend. Explica como o JavaScript evoluiu ao longo dos anos e ressalta a importância de se manter atualizado com as novas funcionalidades, frameworks e padrões de codificação. Também enfatiza a forte comunidade ao redor da linguagem e convida o leitor a participar dela.

A (r)evolução do front-endMarlos Carmo

Windows X Linux Educacionalkeziajs

Hackers Pensandorenanturrm

Flash + WordPress = AmantesActive Media

Dreamweaver e Html5 na PráticaRenato Melo

LESS CSS (Pré compiladores) - IntroduçãoMarcos César

Criando Webservice REST com NodeJS, NoSQL & DockerGiovanni Kenji Shiroma

Desenvolvimento Web com Software LivreGivanaldo Rocha

O documento resume os principais pontos sobre desenvolvimento web com software livre. Em particular, discute como a web está definindo o futuro da computação e da comunicação humana, apresenta as principais ferramentas de software livre para desenvolvimento web como servidores, bancos de dados e linguagens de programação, e explica porque as organizações estão migrando para o uso de software livre.

Presentta: usando Node.js na práticaNando Vieira

Front-end ENGINEERIvan Banov

Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012Rogerio Prado de Jesus

O documento apresenta o Vagrant, uma ferramenta que agiliza a configuração de ambientes de desenvolvimento virtuais. O Vagrant automatiza a instalação de sistemas operacionais e softwares em máquinas virtuais, tornando os ambientes leves, reproduzíveis e portáteis. O documento demonstra como usar os principais comandos do Vagrant e fornece referências para aprender mais sobre a ferramenta.

ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBdualpixel

O documento discute a evolução do Adobe Animate CC como substituto do Flash Professional para criação de animações para web. Apresenta os formatos Canvas, SVG, WebGL e sprites como alternativas para publicação de animações e detalha os recursos e limitações de cada um. Também aborda a integração do Animate CC com outros softwares Adobe e sua utilização para produção de aplicativos multiplataforma.

Desmistificando um Ambiente de Desenvolvimento WEB com VagrantLuis Henrique Costa

Este documento apresenta a ferramenta Vagrant, que simplifica o ambiente de desenvolvimento web. Vagrant permite a criação, configuração e provisionamento de máquinas virtuais de forma automatizada e portátil através do arquivo Vagrantfile. O documento também discute como ferramentas como Puppet e PuPHPet podem ser usadas para automatizar ainda mais a configuração do ambiente de desenvolvimento.

Joomla!: uma visão geralMarcelo Andrade

Conheça o Sass, mehor amigo do seu CSS - Nayara FelixNayara Felix

Conheça o Sass, mehor amigo do seu CSS - Nayara Felix A repetição de código e a difícil manutenção das folhas de estilo são alguns dos problemas vividos por quem desenvolve para a web. Foi para suprir essas deficiências que o pré processador mais utilizado atualmente nasceu. Nessa palestra vou te mostrar algumas das muitas vantagens que o SASS oferece para o desenvolvimento web. Quem é Nayara Felix? Entusiasta e desenvolvedora front end, sou desenvolvedora magento na FCamara, me formando em sistemas para internet na FIAP e fã incondicional de Harry Potter. Trabalhei com marketing digital, design e fotografia por alguns anos mas minha paixão sempre foram os códigos.

Desenvolvimento PHP com Vagrant - 7Masters PHPRogerio Prado de Jesus

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?RC Comunicação

KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva Edgar Silva

Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01Márcio Dutra

O documento apresenta um treinamento sobre monitoramento de rede com Zabbix/OCS ministrado por Marcos Vinicius Campez. O treinamento objetiva ensinar os participantes a instalar, configurar e administrar o Zabbix de forma a monitorar eficazmente os dispositivos de rede, melhorando o controle e a resposta a problemas. O documento descreve os módulos do Zabbix, como instalá-lo e usar a interface web para configuração e monitoramento.

Guia do Front-end das GaláxiasDavidson Fellipe

JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...iMasters

Charles Carrari apresenta ferramentas de virtualização como Vagrant e Docker para simplificar o desenvolvimento front-end. Ele discute os principais problemas enfrentados por desenvolvedores front-end e como essas ferramentas podem ajudar a resolver problemas de compatibilidade, replicação de ambientes e diferenças entre desenvolvimento e produção. Carrari também fornece exemplos e links para aprender mais sobre Vagrant e Docker.

Apostila dreamweavercs5Missão Salesiana de Mato Grosso

Curso: Web Design ResponsivoTersis Zonato

JavaServer Faces - Desenvolvendo aplicações web com produtividadeRafael Ponte

Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebLeonardo Balter

O melhor da monitoração de web performanceDavidson Fellipe

Workflow para desenvolvimento Web & Mobile usando grunt.jsDavidson Fellipe

This document discusses using Grunt.js to automate workflows for mobile development. It begins by explaining why automation is useful, then discusses various task runners like Grunt, Make, Ant, etc. It focuses on Grunt, explaining how to set it up, configure it with plugins, and use tasks like Compass, Watch, Uglify, Imagemin. Finally, it shows how to integrate Grunt with PhoneGap for mobile app development. The overall document provides an introduction and guide to using Grunt.js to improve the development process.

Anúncio

Mais conteúdo relacionado

Semelhante a Workflow Open Source para Frontend Developers (20)

LESS CSS (Pré compiladores) - IntroduçãoMarcos César

Criando Webservice REST com NodeJS, NoSQL & DockerGiovanni Kenji Shiroma

Desenvolvimento Web com Software LivreGivanaldo Rocha

Presentta: usando Node.js na práticaNando Vieira

Front-end ENGINEERIvan Banov

Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012Rogerio Prado de Jesus

ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBdualpixel

Desmistificando um Ambiente de Desenvolvimento WEB com VagrantLuis Henrique Costa

Joomla!: uma visão geralMarcelo Andrade

Conheça o Sass, mehor amigo do seu CSS - Nayara FelixNayara Felix

Desenvolvimento PHP com Vagrant - 7Masters PHPRogerio Prado de Jesus

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?RC Comunicação

KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva Edgar Silva

Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01Márcio Dutra

Guia do Front-end das GaláxiasDavidson Fellipe

JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...iMasters

Apostila dreamweavercs5Missão Salesiana de Mato Grosso

Curso: Web Design ResponsivoTersis Zonato

JavaServer Faces - Desenvolvendo aplicações web com produtividadeRafael Ponte

Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebLeonardo Balter

LESS CSS (Pré compiladores) - IntroduçãoMarcos César

Criando Webservice REST com NodeJS, NoSQL & DockerGiovanni Kenji Shiroma

Desenvolvimento Web com Software LivreGivanaldo Rocha

Presentta: usando Node.js na práticaNando Vieira

Front-end ENGINEERIvan Banov

Desenvolvimento PHP com Vagrant - PHP Conference Brasil 2012Rogerio Prado de Jesus

ANIMATE CC – A NOVA APOSTA DA ADOBE PARA ANIMAÇÃO NA WEBdualpixel

Desmistificando um Ambiente de Desenvolvimento WEB com VagrantLuis Henrique Costa

Joomla!: uma visão geralMarcelo Andrade

Conheça o Sass, mehor amigo do seu CSS - Nayara FelixNayara Felix

Desenvolvimento PHP com Vagrant - 7Masters PHPRogerio Prado de Jesus

DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?RC Comunicação

KVM, Aeolus, DeltaCloud, Openshift e JBoss - Edgar Silva Edgar Silva

Apresentacaoworkshop zabbix-ocs-130710082209-phpapp01Márcio Dutra

Guia do Front-end das GaláxiasDavidson Fellipe

JS Experience 2017 - Utilizando a virtualização para simplificar o desenvolvi...iMasters

Apostila dreamweavercs5Missão Salesiana de Mato Grosso

Curso: Web Design ResponsivoTersis Zonato

JavaServer Faces - Desenvolvendo aplicações web com produtividadeRafael Ponte

Novo Cinto de Utilidades do Desenvolvedor JavaScript, WebAPIs e Open WebLeonardo Balter

Mais de Davidson Fellipe (18)

O melhor da monitoração de web performanceDavidson Fellipe

Workflow para desenvolvimento Web & Mobile usando grunt.jsDavidson Fellipe

Como é trabalhar na globocom?Davidson Fellipe

Practical guide for front-end development for django devsDavidson Fellipe

Guia prático de desenvolvimento front-end para django devsDavidson Fellipe

1) O documento discute estratégias e ferramentas para desenvolvimento front-end em Django, incluindo HTML, CSS, JavaScript, pré-processadores, frameworks, automação de tarefas e padrões de codificação. 2) É destacada a importância da performance no front-end e são apresentadas ferramentas para teste e otimização como JSLitmus e Pitomba. 3) O autor fornece seus contatos e recursos adicionais para aqueles interessados no tópico.

Esse cara é o gruntDavidson Fellipe

Frontend Engineers: passado, presente e futuroDavidson Fellipe

Este documento discute a profissão de engenheiro front-end, incluindo suas responsabilidades, habilidades necessárias e tendências atuais e futuras. Apresenta a evolução das tecnologias front-end ao longo do tempo e discute como a profissão tem se adaptado aos novos desafios trazidos por dispositivos móveis e plataformas diversas. Também destaca a importância das comunidades front-end no Brasil.

Turbinando seu workflow para o desenvolvimento de webappsDavidson Fellipe

Os segredos dos front end engineersDavidson Fellipe

Javascript Cross-browserDavidson Fellipe

performance em jQuery appsDavidson Fellipe

RioJS - Apresentação sobre o grupoDavidson Fellipe

frontend {retirante: nordestino;}Davidson Fellipe

CANVAS vs SVG @ FrontInRio 2011Davidson Fellipe

Canvas elementDavidson Fellipe

Tutorial Crição De Imagens Panoramicas HuginDavidson Fellipe

Sistema De Comunicação Bluetooth Usando Microcontrolador PICDavidson Fellipe

Engenheiros desenvolvem soluções cada vez mais robustas, para nos trazer maior simplicidade, praticidade e eficiência para o paradigma de comunicação sem fio e torná-la cada vez mais presente em nossas vidas. Diante da necessidade de uma solução para comunicação sem de fio para curtas distâncias que segura, de baixo custo, com suporte a comunicação por voz e por dados e com facilidade de integração aos protocolos de comunicação, surgiu o Bluetooth. O proposto por este trabalho é o desenvolvimento de um sistema de comunicação Bluetooth utilizando microcontrolador PIC. Com o objetivo de desenvolver um módulo para plataforma de desenvolvimento PIC e outro que será o módulo de responsável para comunicação Bluetooth. E por fim fornecer uma biblioteca de funções, de código aberto, escrita em C, para facilitar o desenvolvimento de aplicações que desejem utilizar o protocolo de comunicação Bluetooth para microcontroladores da família PIC.

O melhor da monitoração de web performanceDavidson Fellipe

Workflow para desenvolvimento Web & Mobile usando grunt.jsDavidson Fellipe

Como é trabalhar na globocom?Davidson Fellipe

Practical guide for front-end development for django devsDavidson Fellipe

Guia prático de desenvolvimento front-end para django devsDavidson Fellipe

Esse cara é o gruntDavidson Fellipe

Frontend Engineers: passado, presente e futuroDavidson Fellipe

Turbinando seu workflow para o desenvolvimento de webappsDavidson Fellipe

Os segredos dos front end engineersDavidson Fellipe

Javascript Cross-browserDavidson Fellipe

performance em jQuery appsDavidson Fellipe

RioJS - Apresentação sobre o grupoDavidson Fellipe

frontend {retirante: nordestino;}Davidson Fellipe

CANVAS vs SVG @ FrontInRio 2011Davidson Fellipe

Canvas elementDavidson Fellipe

Tutorial Crição De Imagens Panoramicas HuginDavidson Fellipe

Sistema De Comunicação Bluetooth Usando Microcontrolador PICDavidson Fellipe

Anúncio

Workflow Open Source para Frontend Developers

1. WORKFLOW OPENSOURCE PARA FRONTEND DEVELOPERS por davidson fellipe www.fellipe.com

2. I’mDAVIDSON FELLIPE

3. WORKS

4. ERA UMA VEZ...

5. http://www.oldversion.com/windows/macromedia-dreamweaver/ E AINDA...

6. LAYOUT USANDO TABLE?

7. ENQUANTO ISSO EM 2000...

8. HTML CSS 2006...

9. precisa saber JAVASCRIPT? 2006...

10. ATUALMENTE...

11. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB

12. SEMÂNTICA FERRAMENTAS FRAMEWORKS LIBRARIES PRÉ PROCESSADORES SEO TESTES PADRÕES WEB

13. XBROWSER XDEVICE XPLATFORM

14. XBROWSER XDEVICE XPLATFORM

15. MULTITASKING... @flavioribeiro na globo.com

16. VAMOS ARRUMAR A CASA?

18. EDITORES

19. VIM http://www.vim.org/

20. SUBLIME http://www.sublimetext.com/

21. SUBLIME http://www.sublimetext.com/ NÃO É OPEN SOUCE NEM FREE

22. BRACKETS http://brackets.io/

23. DOTFILES

24. DOTFILES.GITHUB.IO http://dotfiles.github.io/

25. automatize suas configurações https://github.com/davidsonfellipe/dotfiles

26. CONTROLE DE VERSÃO

27. git trabalhar com repositórios entender branches pull request code review CONTROLE DE VERSÃO

28. https://bitbucket.org/

29. https://github.com/

30. BITBUCKET VS GITHUB repos privados ilimitados princing baseado no número de colaboradores número de colaboradores ilimitado princing baseado no número de colaboradores

31. TASK RUNNER

32. http://gruntjs.com/

33. O QUE É O GRUNT? É um task runner baseado em linha de comando para projetos javascript

34. O QUE É O GRUNT? Testes JS linting Concatenando e Minificando Otimizando imagens Watches para Pré-processadores

35. Por que usar o GRUNT? Facil de usar Grande número de plugins Imensa comunidade Open source

36. Instalados e gerenciados via NPM (node.js) Adiciona grunt command no system path INICIANDO COM GRUNT $ npm install -g grunt-cli

37. package.json { "name": "project-name", "version": "0.1.0", "description": "Project description" }

38. gruntfile.js module.exports = function( grunt ) { grunt.initConfig({ // configuracoes }); //plugins grunt.loadNpmTasks( 'plugin-name' ); //tarefas grunt.registerTask( 'default', [ 'watch' ] ); };

39. INSTALANDO GRUNT $ npm install grunt --save-dev Instala a ultima versão no seu folder Adiciona ao package.json

40. ANT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

41. RAKE http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

42. GRUNT http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/

43. PRÉ-PROCESSADORES

50. http://usablica.github.io/front-end-frameworks/compare.html

51. QUALIDADE DE CÓDIGO

52. JSHINT http://www.jshint.com/

53. CSSLINT http://csslint.net/

54. TESTES

57. PERFORMANCE

58. YSLOW http://developer.yahoo.com/yslow/