continuous delivery with javascript
TRANSCRIPT
![Page 1: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/1.jpg)
B r u n o T r e c e n t i , R o g é r i o C h a v e s
FERRAMENTAS JAVASCRIPT E CONTINUOUS DELIVERY
Programando, automatizando e distribuindo aplicações no mundo JS
![Page 2: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/2.jpg)
2
@brunotrecenti
@_rchaves_
![Page 3: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/3.jpg)
AGENDA
3
•Um pouco sobre o contexto
•Fundamentos
• Continuous Delivery
• Possibilidades do mundo JavaScript
• Será que eu deveria comprar um carro?
•Ferramentas JavaScript
![Page 4: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/4.jpg)
UM POUCO SOBRE O CONTEXTOPor que desenvolvedores têm que se preocupar com automatização, testes, qualidade, integração e entrega contínua?
4
![Page 5: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/5.jpg)
CONTEXTO
5
Design Thinking
Lean Startup Agile
![Page 6: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/6.jpg)
DESIGN THINKING
6
“Innovation powered by… direct observation of what people want and need in their lives and what they like or dislike about the way particular products are made, package, marketed, sold and
supported… [It’s] a discipline that uses the designer’s sensibility and methods to match people’s needs with what is technologically
feasible and what viable business strategy can convert into customer value and market
opportunity.” (Tim Brown, IDEO)
![Page 7: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/7.jpg)
LEAN STARTUP
7
“Lean Startup initially advocates the creation of rapid prototypes designed to test market
assumptions and uses costumer feedback to evolve them much faster than more traditional
software then more traditional software engineering practices… Lean Startup processes
reduce waste by increasing frequency of contact with real costumers, therefore testing and
avoiding incorrect market assumptions as early as possible” (Eric Ries)
![Page 8: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/8.jpg)
AGILE SOFTWARE DEVELOPMENT
8
Indivíduos e interações acima de processos e ferramentas
Software funcionando acima de documentação
Colaboração com o cliente acima de negociações contratuais
Responder a mudanças acima de seguir um plano
![Page 9: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/9.jpg)
CONTINUOUSDELIVERYA resposta técnica para as necessidades de processo, produto e mercado.
9
![Page 10: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/10.jpg)
3 PRINCÍPIOS DE CONTINUOUS DELIVERY
10
•Cada mudança deve iniciar um processo de feedback
•O feedback deve ser recebido o mais rápido o possível
•O time de entrega deve receber feedback e então atuar nisto
![Page 11: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/11.jpg)
INNOVATION CYCLE
11
•Selection of an idea
•Refinement of the idea into a testable hypothesis
•Selection of features to implement the idea
•Development and testing of these features
•Development and testing of the measures that will demonstrate if the hypothesis is true or not
•Deployment of the idea into production
•Measurement of the success or failure of the idea
•Repeat the cycle.
(Rebecca Parsons)
![Page 12: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/12.jpg)
12
![Page 13: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/13.jpg)
13
At an abstract level, a deployment pipeline is an automated manifestation of your process of getting software from version control into the
hands of your users. ( Jez Humble)
![Page 14: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/14.jpg)
POSSIBILIDADES DO MUNDO JAVASCRIPTQuando o NodeJS chegou ele mudou tudo
14
![Page 15: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/15.jpg)
15
https://www.google.com/trends/explore#q=node.js&cmpt=q&tz=Etc%2FGMT%2B3
![Page 16: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/16.jpg)
16
https://www.google.com/trends/explore#q=single%20page%20applications%2C%20single%20page%20apps&cmpt=q
![Page 17: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/17.jpg)
SHOULD I EVER BUY A CAR?Uma aplicação para descobrir se vale a pena ter um carro ou não
17
![Page 19: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/19.jpg)
19
![Page 20: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/20.jpg)
20
Drawing link
https://docs.google.com/drawings/d/1KrBEMO1IB8t15xjN9jkJQAmKmz3aL-vVDJh9ikB1clo/edit?usp=sharing
![Page 21: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/21.jpg)
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.
21
![Page 22: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/22.jpg)
22
isaacchansky.me/days-since-last-new-js-framework/
![Page 23: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/23.jpg)
23
![Page 24: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/24.jpg)
JAVASCRIPT TOOLKIT
24
http://javascript-toolkit.com/
http://staging-js-toolkit.herokuapp.com/
![Page 25: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/25.jpg)
Let’s talk about this needs,
And take a look at some tools
25
![Page 26: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/26.jpg)
BASIC BLOCKS OF THE TOOLKIT
26
•Infrastructure & Development
•Testing
•Application & Product
•Utilities & Support
![Page 27: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/27.jpg)
INFRASTRUCTURE & DEVELOPMENT
27
![Page 28: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/28.jpg)
SCAFFOLD
28
Several tools. Several ways.
Several Practices. Need to
organize, and give some good
foundation - best practices,
good design.
![Page 29: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/29.jpg)
29
bootstraps seed projects
![Page 30: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/30.jpg)
AUTOMATION
30
Lots of tasks to execute. Compile. Test. Minify. Concat. Uglify. Etc.
![Page 31: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/31.jpg)
31
github.com/broccolijs/broccoli
…ake’s (Make, Rake, etc)
![Page 32: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/32.jpg)
AUTOMATION UTILITIES
32
Tasks that can be put in the build pipeline.
![Page 33: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/33.jpg)
33
minify-tools
concat-tools watch-tools
UglifyJS
![Page 34: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/34.jpg)
DEPENDENCY MANAGEMENT
34
Applications are getting complex. They rely on several external libraries and
frameworks.
![Page 35: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/35.jpg)
35
![Page 36: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/36.jpg)
JAVASCRIPT BUNDLERS
36
Javascript doesn’t have a default way of requiring modules, so we need to bundle them up to work
together
![Page 37: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/37.jpg)
37
![Page 38: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/38.jpg)
DYNAMIC LOADING
38
Big projects are split among several pieces of javascript for the sake of
modularisation. No all of them should be loaded at the same time.
![Page 39: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/39.jpg)
39
curl.js
![Page 40: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/40.jpg)
OTHER LANGUAGES
40
Have a syntactic sugar element, or even completely different syntax (that in the end turn into javascript to run in the
browser)
![Page 41: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/41.jpg)
41
ClojureScript
![Page 42: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/42.jpg)
TESTING
42
![Page 43: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/43.jpg)
TEST FRAMEWORKS
43
Write tests
![Page 44: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/44.jpg)
44
![Page 45: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/45.jpg)
TEST RUNNER
45
Execute and visualize test results
![Page 46: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/46.jpg)
46
![Page 47: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/47.jpg)
TESTING END TO END
47
Write tests for the whole
application flow
![Page 48: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/48.jpg)
48
![Page 49: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/49.jpg)
TEST SUPPORT
49
Support for tests and others helpers
![Page 50: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/50.jpg)
50
Sinon.JS
![Page 51: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/51.jpg)
APPLICATION & PRODUCT
51
![Page 52: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/52.jpg)
APPLICATION FRAMEWORKS
52
Applications on web are getting complex, need for frameworks that
support app development.
![Page 53: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/53.jpg)
53
![Page 54: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/54.jpg)
APPLICATION UTILITIES
54
Several features that can be necessary for your application
![Page 55: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/55.jpg)
55
Page.js
localForage
![Page 56: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/56.jpg)
UTILITIES & SUPPORT
56
![Page 57: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/57.jpg)
DOM UTILITIES
57
DOM selection and manipulation, some auxiliary functions, need for utilities that make work simple (and cross-browser)
![Page 58: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/58.jpg)
58
three.js
![Page 59: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/59.jpg)
JS UTILITIES
59
Clean code, functional programming style, reactive programming features,
helpers and utilities
![Page 60: Continuous Delivery with JavaScript](https://reader033.vdocuments.com.br/reader033/viewer/2022052300/588960b41a28abef658b66fd/html5/thumbnails/60.jpg)
60
RAMDA