The Javascript Toolkit
•Als PPTX, PDF herunterladen•
0 gefällt mir•633 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie The Javascript Toolkit
Ähnlich wie The Javascript Toolkit (20)
The Javascript Toolkit
- 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
- 3. Recife, Belo Horizonte, São Paulo e Porto Alegre 3
- 4. INSIGHTS 4
- 5. PRODUTOS 5
- 6. PRODUTOS 6
- 7. PRODUTOS 7
- 8. 8
- 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 JAVASCRIPT COMO UTILITÁRIO Quem nunca precisou de uma máscara e achou um script maroto para resolver o problema?
- 12. 12
- 13. 13
- 15. Vamos falar sobre as necessidades, E então olhar para algumas ferramentas 15
- 16. ESTRUTURA DO TOOLKIT 16 ▫Infraestrutura e Desenvolvimento ▫Testes ▫Aplicações & Produtos ▫Utilitários e Suporte
- 18. SCAFFOLD (ANDAIME, ESQUELETO) 18 Iniciar novos projetos. Produtividade.
- 20. JAVASCRIPT PREPROCESSORS 20 A maneira como você organiza o seu código durante o desenvolvimento é diferente de como você o publica
- 21. 21
- 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
- 24. AUTOMAÇÃO 24 Diversas tarefas/rotinas que precisam ser executadas frequentemente. Compile, Test, Minify, Concat, Uglify, Etc.
- 27. 27
- 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
- 30. TESTES 30
- 31. EXECUTORES DE TESTES 31 Executar e visualizar o resultado dos testes
- 32. 32
- 33. FRAMEWORKS DE TESTES 33 Escrever os testes Utilidades para mocking, spying, etc
- 34. 34
- 35. 35
- 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
- 38. 38
- 39. 39
- 40. TESTES SEM GUI 40 Como testar JavaScript sem um navegador com interface gráfica?
- 41. 41
- 43. APPLICATION FRAMEWORKS 43 As aplicações estão ficando complexas e diversos frameworks foram criados para suportar o desenvolvimento delas.
- 46. UTILITÁRIOS PARA APLICAÇÕES 46 Você não precisa de um canhão para matar uma mosca.
- 47. 47
- 48. CARREGAMENTO PREGUIÇOSO 48 Grandes projetos estão divididos em diferentes módulos. Nem todos devem ser carregados de uma vez.
- 51. UTILITÁRIOS PARA MANIPULAÇÃO DO DOM 51 Manipulação do DOM e funções auxiliares que funcionam cross-browser
- 52. 52
- 53. SIMPLES E INDISPENSÁVEIS UTILITÁRIOS 53 Código limpo; Programação funcional; Helpers e Utilitários;
Hinweis der Redaktion
- 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.