This document discusses JavaScript tools and continuous delivery. It begins with context around design thinking, lean startup, and agile principles. Continuous delivery is introduced as the technical response to needs of process, product, and market. Key aspects of continuous delivery include ensuring every change initiates feedback and receiving feedback as quickly as possible. When Node.js arrived, it changed everything by enabling server-side JavaScript. The document then discusses potential tools and frameworks for infrastructure/development, testing, applications, and utilities to organize the recent explosion of JavaScript technologies into a coherent toolkit. It provides examples for areas like bundling, dynamic loading, testing, and more.

1. B r u n o Tr 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

2. 2
@brunotrecenti
@_rchaves_

3. AGENDA
3
•Um pouco sobre o contexto
•Fundamentos
• Continuous Delivery
• Possibilidades do mundo JavaScript
• Será que eu deveria comprar um carro?
•Ferramentas JavaScript

4. UM POUCO
SOBRE O CONTEXTO
Por que desenvolvedores têm que se preocupar com automatização, testes,
qualidade, integração e entrega contínua?
4

5. CONTEXTO
5
Design
Thinking
Lean
Startup Agile

6. 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)

7. 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)

8. 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

9. CONTINUOUS
DELIVERY
A resposta técnica para as necessidades de processo, produto e mercado.
9

10. 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

11. 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)

12. 12

13. 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)

14. POSSIBILIDADES DO
MUNDO JAVASCRIPT
Quando o NodeJS chegou ele mudou tudo
14

15. 15
https://www.google.com/trends/explore#q=node.js&cmpt=q&tz=Etc%2FGMT%2B3

16. 16
https://www.google.com/trends/explore#q=single%20page%20applications%2C%20single
%20page%20apps&cmpt=q

17. SHOULD I
EVER BUY A CAR?
Uma aplicação para descobrir se vale a pena ter um carro ou não
17

18. 18
github.com/bymarkone/siebac

19. 19

20. 20
Drawing link
https://docs.google.com/drawings/d/
1KrBEMO1IB8t15xjN9jkJQAmKmz3aL-
vVDJh9ikB1clo/edit?usp=sharing

21. 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

22. 22
isaacchansky.me/days-since-last-new-js-framework/

23. 23

24. JAVASCRIPT TOOLKIT
24
http://javascript-toolkit.com/
http://staging-js-toolkit.herokuapp.com/

25. Let’s talk about this needs,
And take a look at some tools
25

26. BASIC BLOCKS OF THE TOOLKIT
26
•Infrastructure & Development
•Testing
•Application & Product
•Utilities & Support

27. INFRASTRUCTURE
& DEVELOPMENT
27

28. SCAFFOLD
28
Several tools. Several ways.
Several Practices. Need to
organize, and give some good
foundation - best practices,
good design.

29. 29
bootstraps
seed
projects

30. AUTOMATION
30
Lots of tasks to execute. Compile. Test.
Minify. Concat. Uglify. Etc.

31. 31
github.com/broccolijs/broccoli
…ake’s (Make, Rake, etc)

32. AUTOMATION UTILITIES
32
Tasks that can be put in the build
pipeline.

33. 33
minify-tools
concat-tools watch-tools
UglifyJS

34. DEPENDENCY MANAGEMENT
34
Applications are getting complex. They
rely on several external libraries and
frameworks.

35. 35

36. JAVASCRIPT BUNDLERS
36
Javascript doesn’t have a default
way of requiring modules, so we
need to bundle them up to work
together

37. 37

38. 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.

39. 39
curl.js

40. 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)

41. 41
ClojureScript

42. TESTING
42

43. TEST FRAMEWORKS
43
Write tests

44. 44

45. TEST RUNNER
45
Execute and visualize test results

46. 46

47. TESTING END TO END
47
Write tests for the whole
application flow

48. 48

49. TEST SUPPORT
49
Support for tests and others helpers

50. 50
Sinon.JS

51. APPLICATION
& PRODUCT
51

52. APPLICATION FRAMEWORKS
52
Applications on web are getting
complex, need for frameworks that
support app development.

53. 53

54. APPLICATION UTILITIES
54
Several features that can be necessary
for your application

55. 55
Page.js
localForage

56. UTILITIES
& SUPPORT
56

57. DOM UTILITIES
57
DOM selection and manipulation, some
auxiliary functions, need for utilities that
make work simple (and cross-browser)

58. 58
three.js

59. JS UTILITIES
59
Clean code, functional programming
style, reactive programming features,
helpers and utilities

60. 60
RAMDA

61. Dúvidas e sugestões:
@brunotrecenti
@_rchaves_
btrecent@thoughtworks.com
rchaves@thoughtworks.com
MUITO OBRIGADO