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

2

@brunotrecenti

@_rchaves_

AGENDA

3

•Um pouco sobre o contexto

•Fundamentos

• Continuous Delivery

• Possibilidades do mundo JavaScript

• Será que eu deveria comprar um carro?

•Ferramentas JavaScript

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

4

CONTEXTO

5

Design Thinking

Lean Startup Agile

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)

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)

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

CONTINUOUSDELIVERYA resposta técnica para as necessidades de processo, produto e mercado.

9

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

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

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)

POSSIBILIDADES DO MUNDO JAVASCRIPTQuando o NodeJS chegou ele mudou tudo

14

15

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

16

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

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

17

18

github.com/bymarkone/siebac

19

20

Drawing link

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

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

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

23

JAVASCRIPT TOOLKIT

24

http://javascript-toolkit.com/

http://staging-js-toolkit.herokuapp.com/

Let’s talk about this needs,

And take a look at some tools

25

BASIC BLOCKS OF THE TOOLKIT

26

•Infrastructure & Development

•Testing

•Application & Product

•Utilities & Support

INFRASTRUCTURE & DEVELOPMENT

27

SCAFFOLD

28

Several tools. Several ways.

Several Practices. Need to

organize, and give some good

foundation - best practices,

good design.

29

bootstraps seed projects

AUTOMATION

30

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

31

github.com/broccolijs/broccoli

…ake’s (Make, Rake, etc)

AUTOMATION UTILITIES

32

Tasks that can be put in the build pipeline.

33

minify-tools

concat-tools watch-tools

UglifyJS

DEPENDENCY MANAGEMENT

34

Applications are getting complex. They rely on several external libraries and

frameworks.

35

JAVASCRIPT BUNDLERS

36

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

together

37

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

curl.js

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

ClojureScript

TESTING

42

TEST FRAMEWORKS

43

Write tests

44

TEST RUNNER

45

Execute and visualize test results

46

TESTING END TO END

47

Write tests for the whole

application flow

48

TEST SUPPORT

49

Support for tests and others helpers

50

Sinon.JS

APPLICATION & PRODUCT

51

APPLICATION FRAMEWORKS

52

Applications on web are getting complex, need for frameworks that

support app development.

53

APPLICATION UTILITIES

54

Several features that can be necessary for your application

55

Page.js

localForage

UTILITIES & SUPPORT

56

DOM UTILITIES

57

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

58

three.js

JS UTILITIES

59

Clean code, functional programming style, reactive programming features,

helpers and utilities

60

RAMDA

Dúvidas e sugestões: @brunotrecenti

@_rchaves_

btrecent@thoughtworks.com rchaves@thoughtworks.com

MUITO OBRIGADO