R e n a n M a r t i n s , A l a b ê D u a r t e
JAVASCRIPT TOOLKIT
Programando, automatizando e distribuindo aplicações
no...
2
@renan89
@alabeduarte
Recife, Belo Horizonte, São Paulo e Porto Alegre
3
INSIGHTS
4
PRODUTOS
5
PRODUTOS
6
PRODUTOS
7
8
9
#javascript-toolkit
THE JAVASCRIPT
TOOLKIT
An attempt to organize the recent explosion of Javascript based technologies
and frameworks into a ...
11
JAVASCRIPT COMO
UTILITÁRIO
Quem nunca precisou de uma máscara e achou um script maroto para
resolver o problema?
12
13
MICRO FRAMEWORKS
14
Vamos falar sobre as necessidades,
E então olhar para algumas ferramentas
15
ESTRUTURA DO TOOLKIT
16
▫Infraestrutura e Desenvolvimento
▫Testes
▫Aplicações & Produtos
▫Utilitários e Suporte
INFRAESTRUTURA E
DESENVOLVIMENTO
17
SCAFFOLD (ANDAIME,
ESQUELETO)
18
Iniciar novos projetos.
Produtividade.
19
bootstraps
seed
projects
JAVASCRIPT
PREPROCESSORS
20
A maneira como você organiza o seu
código durante o desenvolvimento é
diferente de como você o...
21
GERENCIAMENTO DE
DEPENDÊNCIAS
22
Aplicações JavaScript estão ficando
cada vez maiores e complexas.
Dependem cada vez mais ...
23
AUTOMAÇÃO
24
Diversas tarefas/rotinas que precisam
ser executadas frequentemente.
Compile, Test, Minify, Concat, Uglify,
E...
25
github.com/broccolijs/broccoli
…ake’s (Make, Rake, etc)
26
minify-tools
concat-tools watch
27
OUTRAS LINGUAGENS.
ABSTRAÇÕES
28
Açúcar sintático ou até mesmo
linguagens / abstrações com sintaxes
completamente diferent...
29
github.com/clojure/clojurescript
TESTES
30
EXECUTORES DE TESTES
31
Executar e visualizar o resultado dos
testes
32
FRAMEWORKS DE TESTES
33
Escrever os testes
Utilidades para mocking, spying, etc
34
35
TESTE PONTA A PONTA
36
Escrever testes que exercitam todo o
fluxo da aplicação, da mesma
maneira como um usuário final far...
37
38
39
TESTES SEM GUI
40
Como testar JavaScript sem um
navegador com interface gráfica?
41
APLICAÇÕES E
PRODUTOS
42
APPLICATION FRAMEWORKS
43
As aplicações estão ficando
complexas e diversos frameworks
foram criados para suportar o
desenv...
44
Google Closure Tools
MOBILE DEVELOPMENT
45
UTILITÁRIOS PARA
APLICAÇÕES
46
Você não precisa de um canhão para
matar uma mosca.
47
CARREGAMENTO
PREGUIÇOSO
48
Grandes projetos estão divididos em
diferentes módulos.
Nem todos devem ser carregados de
uma v...
49
github.com/cujojs/curl
github.com/amdjs/amdjs-api
github.com/amdjs/caolan/async
UTILITÁRIOS E
SUPORTE
50
UTILITÁRIOS PARA MANIPULAÇÃO DO DOM
51
Manipulação do DOM e funções
auxiliares que funcionam
cross-browser
52
SIMPLES E INDISPENSÁVEIS UTILITÁRIOS
53
Código limpo; Programação funcional;
Helpers e Utilitários;
54
lodash.com
github.com/kriskowal/q
baconjs sugarjs chancejs microjs
55
http://javascript-toolkit.com/
56
http://javascript-toolkit.com/
Dúvidas e sugestões:
rmartins@thoughtworks.com
aduarte@thoughtworks.com
MUITO OBRIGADO
Próximos SlideShares
Carregando em…5
×

The Javascript Toolkit

445 visualizações

Publicada em

Apresentação sobre o javascript toolkit na EXPOTEC 2015

This is an attempt by some colleagues and I to organize the recent explosion of Javascript based technologies and frameworks into a coherent toolkit to be used by a web application developer.

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
445
No SlideShare
0
A partir de incorporações
0
Número de incorporações
54
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Falar que iremos sortear os livros no final da palestra
  • Hoje vim rapidamente apresentar pra vocês o Javascript Toolkit. Uma tentativa de catalogar as diversas tecnologias e frameworks front end (client-side) utilizadas por um desenvolvedor web moderno. Moderno? Há tempos, mas principalmente após 2009, com a criação do nodejs, Javascript deixou de ser uma linguagem utilizada para validação de formulários, animação de elementos do DOM e outras pequenas rotinas. Hoje ela é usada para o desenvolvimento de aplicações completas, que detém lógica do negócio. (exemplo ultima app que trabalhei profissionalmente foi escrita em angularjs e 80% do código de toda aplicação era JS).
    Portanto, javascript passou a ser considerada uma cidadã de primeira classe dentro dos pipelines de integração contínua das organizações. O que isso significa? Código javascript deve se testado, devidamente modularizado e componentizado, otimizado, padronizado (jshint), etc. Além disso, o processo de desenvolvimento em javascript deve ser produtivo (IDEs, scaffolding, syntax sugar - coffeescript, typescript, etc). E por último, mas não menos importante, javascript traz consigo novos desafios, tais como o fato de que TODO o código vive no navegador do cliente. Esconder a lógica de negócio e segurança também são tópicos bastante relevantes para quem desenvolve javascript. NodeJS possibilitou que tudo isso de maneira MUITO mais simplificada.
  • explicar o que é nodejs:
    nodejs is a platform built on google v8 runtime; provides scalable networking, filesystem, etc non-blocking and even-driver modules to ease backend development;
  • tudo que pode ser escrito em javascript VAI ser escrito em javascript;
    NPM foi um enabler da comunidade open source javascript. Praticamente todas as ferramentas do toolkit são distribuídas como node packages;
    NPM mudou a mentalidade da comunidade para focar em modularidade e coesão;
  • We usually think in terms of the libraries that will give support to the application we are developing. And what about the software that will speed up and ease our development? This can include task automation, project easy configuration, dependency management and much more.
  • Imagine you are about to start a new project. How to organize it? What is the folder structure, where to put the configuration, application, libraries and test files? Some times is not just a question of where to put the files, but of the standard way of doing that. What are the best practics the community has collected along the years? How to keep necessary modularization and separation of concerns?

    A scaffolding tool helps you kickstart new projects, prescribing best practices and tools to help you stay productive, having fun during development and remove bureaucracy out of the way; Focar no que realmente importa!
    Lot’s of things that need to be done before you really start your application;
  • $yo angular minhaNovaApp
    Mais um comando e você tem a app rodando
    Mais um comando e você adiciona componentes do framework.. etc

    Extensível: você pode criar seus próprios generators.
  • Em aplicações maiores, quase sempre a maneira como você organiza o seu código durante o desenvolvimento é diferente de como você o publica.
  • Webpack is a module bundler tool, that generates your assets with the modules required in order. It can make use of AMD-compliant, CommonJs-compliant modules, ES6 modules, script-tags and custom-defined bundles. There are costumization options for many of the aspects of the generated assets, as well as pre-processing files before bundling in.

    Browserify lets you load modules by bundling the dependencies in the required order, producing a customized JavaScript asset. It can require CommonJs-compliant modules, and with the help of <a href='https://www.npmjs.com/package/browserify-shim'>browserify-shim</a> non-Commonjs modules (like AMD and global scripts).
  • Applications are getting complex. Most of the times, even simple front-end efforts envolve using several third party libraries. How to coordinate this dependencies in your project? How to keep track of the evolution of the libraries you depend on? How to manage transitive dependencies? How to easily download all the dependencies within new workstations?


    RubyGems, maven, gradle…
  • component - faz meio que tudo
    gerenciamento packages node
  • The day of manually testing, building and publishing your applications are long gone (if they ever existed). Application development is getting complex, and each of its phases, from conception to delivery, is full of subparts. In the JavaScript world, several tools must be played interwined, to test, assembly, compile, minify, lint and deliver your code. That is why you need automation.

    The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. Every time you change the code! After you've configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.
  • grunt vs gulp:
    Grunt - configuration over code;
    Gulp - streaming build system (maximum concurrency), code over configuration
  • What are the several parts I should run within an automation pipeline? Many times they depend on the project specific context. Nevertheless, yout toolkit should contains options enough to allow you to answer the projects needs as soon as they appear.
  • javascript first appeared in 1995; 20 years ago.
    Brendan Eich developed its first version in 10 days :D

    It’s amazing that It rules the modern web and now is really relevant on mobile too!

    However, some people don’t like its syntax very much, soooo:
    There are a few other languages that were written that compile to JavaScript. You can use any of them according to your taste or your team’s preference.
  • CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

    ClojureScript is a new compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

    TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.
  • What do software automation, quality, changeability, and continuous delivery have in common? Testing. Testing is a key factor to produce software of value, and its importance can never be diminished. Here you will find tools that help to write your tests, create mocks and stubs when needed. Run them and get the right feedback, as well as automate them to integrate with your build pipeline.
  • Environments for easy testing.
  • The main goal for Karma is to bring a productive testing environment to developers.
    Karma also watches all the files;
    It is Testing Framework Agnostic;
  • Tools to allow you write your tests.
  • JASMINE VS MOCHA
    The APIs of these two frameworks are very similar. They both allow you to write your tests in the describe block format.

    Mocha does not come with a mocking/spy library unlike Jasmine. Instead you will need to load in Sinon.js into your test harness. Sinon is a very powerful mocking library and is the equivalent of Jasmine spies with a little more.

    Asynchronous testing in Jasmine 2.x and Mocha is the same.

    SINON FAKE SERVER
    One feature that Sinon has that Jasmine does not is a fake server. This allows you to setup fake responses to AJAX requests made for certain URLs.

    In conclusion, the Jasmine framework has everything built into it including assertions and mocking utilities (which are called spies). Mocha is just a test runner and does not include assertion and mocking utilities.
  • Test the whole flow of your application.
  • A maioria das aplicações são construídas e testadas em agentes linux sem interface gráfica. Como rodar os testes
  • Phantom JS is a headless webkit browser with scripting capabilities.
    Zombie JS is a simulated browser environment to interact with web pages.
  • Applications made to run on the web are getting complex. We are now being able to build in the browser, applications with a behavior as rich as desktop ones. Nevertheless, is all html. We need frameworks that allow us to extend html to support a rich front-end development.
  • Frameworks provides you with an opinionated structure that helps you build your application faster.
  • data binding, templating, dependency tracking,
    Registering callbacks;
    Manipulating html DOM programmatically -
    Every time you get yourself manipulating DOM in angular, there is a chance you’re doing something wrong.
    Marshalling data to and from the UI - scopes will simply be available there;
    Writing tons of initialisation code just to get started;
  • Applications Utilities add common behaviours that are framework independent.
  • Routes / Dispatcher utilities are necessary since JavaScript applications are becoming bigger and more complex each day and it is hard to keep control of what should be loaded/executed at each section.
  • Sometimes your dependencies could be loaded after the page already has some JavaScript enabled behaviours, letting the user interact with the application while you retrieve the remaining code on the background. This is what the Dynamic Loading libraries provide you.
  • As the JavaScript code base evolves, how do we maintain a clean code and still focus on the business of our application? These tools help us achieve that.
  • DOM Utilities are JavaScript libraries to help you come across difference on the API of different browsers, exposing an standard interface when manipulating the rendered elements. Some of those tools also provide extra utilities, like animations or data loading.
  • JavaScript Utilities are libraries that facilitate specific task, like random number generation, managing deferred execution flow or dealing with time, which are nice additions that don't come with the native JavaScript environment.
  • The Javascript Toolkit

    1. 1. R e n a n M a r t i n s , A l a b ê D u a r t e JAVASCRIPT TOOLKIT Programando, automatizando e distribuindo aplicações no mundo JavaScript
    2. 2. 2 @renan89 @alabeduarte
    3. 3. Recife, Belo Horizonte, São Paulo e Porto Alegre 3
    4. 4. INSIGHTS 4
    5. 5. PRODUTOS 5
    6. 6. PRODUTOS 6
    7. 7. PRODUTOS 7
    8. 8. 8
    9. 9. 9 #javascript-toolkit
    10. 10. THE JAVASCRIPT TOOLKIT An attempt to organize the recent explosion of Javascript based technologies and frameworks into a coherent toolkit to be used by a web application developer. 10
    11. 11. 11 JAVASCRIPT COMO UTILITÁRIO Quem nunca precisou de uma máscara e achou um script maroto para resolver o problema?
    12. 12. 12
    13. 13. 13
    14. 14. MICRO FRAMEWORKS 14
    15. 15. Vamos falar sobre as necessidades, E então olhar para algumas ferramentas 15
    16. 16. ESTRUTURA DO TOOLKIT 16 ▫Infraestrutura e Desenvolvimento ▫Testes ▫Aplicações & Produtos ▫Utilitários e Suporte
    17. 17. INFRAESTRUTURA E DESENVOLVIMENTO 17
    18. 18. SCAFFOLD (ANDAIME, ESQUELETO) 18 Iniciar novos projetos. Produtividade.
    19. 19. 19 bootstraps seed projects
    20. 20. JAVASCRIPT PREPROCESSORS 20 A maneira como você organiza o seu código durante o desenvolvimento é diferente de como você o publica
    21. 21. 21
    22. 22. GERENCIAMENTO DE DEPENDÊNCIAS 22 Aplicações JavaScript estão ficando cada vez maiores e complexas. Dependem cada vez mais de diversos frameworks e bibliotecas
    23. 23. 23
    24. 24. AUTOMAÇÃO 24 Diversas tarefas/rotinas que precisam ser executadas frequentemente. Compile, Test, Minify, Concat, Uglify, Etc.
    25. 25. 25 github.com/broccolijs/broccoli …ake’s (Make, Rake, etc)
    26. 26. 26 minify-tools concat-tools watch
    27. 27. 27
    28. 28. OUTRAS LINGUAGENS. ABSTRAÇÕES 28 Açúcar sintático ou até mesmo linguagens / abstrações com sintaxes completamente diferentes que são compiladas para javascript
    29. 29. 29 github.com/clojure/clojurescript
    30. 30. TESTES 30
    31. 31. EXECUTORES DE TESTES 31 Executar e visualizar o resultado dos testes
    32. 32. 32
    33. 33. FRAMEWORKS DE TESTES 33 Escrever os testes Utilidades para mocking, spying, etc
    34. 34. 34
    35. 35. 35
    36. 36. TESTE PONTA A PONTA 36 Escrever testes que exercitam todo o fluxo da aplicação, da mesma maneira como um usuário final faria.
    37. 37. 37
    38. 38. 38
    39. 39. 39
    40. 40. TESTES SEM GUI 40 Como testar JavaScript sem um navegador com interface gráfica?
    41. 41. 41
    42. 42. APLICAÇÕES E PRODUTOS 42
    43. 43. APPLICATION FRAMEWORKS 43 As aplicações estão ficando complexas e diversos frameworks foram criados para suportar o desenvolvimento delas.
    44. 44. 44 Google Closure Tools
    45. 45. MOBILE DEVELOPMENT 45
    46. 46. UTILITÁRIOS PARA APLICAÇÕES 46 Você não precisa de um canhão para matar uma mosca.
    47. 47. 47
    48. 48. CARREGAMENTO PREGUIÇOSO 48 Grandes projetos estão divididos em diferentes módulos. Nem todos devem ser carregados de uma vez.
    49. 49. 49 github.com/cujojs/curl github.com/amdjs/amdjs-api github.com/amdjs/caolan/async
    50. 50. UTILITÁRIOS E SUPORTE 50
    51. 51. UTILITÁRIOS PARA MANIPULAÇÃO DO DOM 51 Manipulação do DOM e funções auxiliares que funcionam cross-browser
    52. 52. 52
    53. 53. SIMPLES E INDISPENSÁVEIS UTILITÁRIOS 53 Código limpo; Programação funcional; Helpers e Utilitários;
    54. 54. 54 lodash.com github.com/kriskowal/q baconjs sugarjs chancejs microjs
    55. 55. 55 http://javascript-toolkit.com/
    56. 56. 56 http://javascript-toolkit.com/
    57. 57. Dúvidas e sugestões: rmartins@thoughtworks.com aduarte@thoughtworks.com MUITO OBRIGADO

    ×