tdc 2015 florianopolis

56
#TDC2015 Floripa Resumão das palestras assistidas [...] #TheDevConf 15 de Maio de 2015 @jpcercal (João Paulo Cercal)

Upload: joao-paulo-cercal

Post on 20-Aug-2015

59 views

Category:

Technology


0 download

TRANSCRIPT

#TDC2015 FloripaResumão das palestras assistidas [...]

#TheDevConf15 de Maio de 2015

@jpcercal (João Paulo Cercal)

About me

<?phpreturn array(

'name' => 'João Paulo Cercal','github' => '@jpcercal',

);

Agenda

a) Análise de Negócios: Valor quem gera e como gera;b) Javascript: A Evolução do AngularJS;c) Javascript: Testes automatizados de todos os tipos usando

blibotecas Javascript;d) Javascript: Arquitetura Front-end para sistemas de larga escala;e) Javascript: Automatizando de forma modular e estruturada

grandes aplicações com Gulp;f) Javascript: Real Time com Node e Socket.io;g) Javascript: Construindo interfaces componentizadas com React.

Análise de Negócios: Valor quem gera e como gera?

Palestrante: Anderson Diniz Hummel

Mais informações em: http://www.thedevelopersconference.com.br/tdc/2015/florianopolis/trilha-analise-de-negocios

Análise de Negócios - Valor quem gera e como gera?

Premissas:a) Meu cliente não

sabe o que quer;

Análise de Negócios: Valor quem gera e como gera?

Soluções:a) Entregas Incrementais;

Pois, o cliente não sabe o quequer, muito menos você!

Análise de Negócios: Valor quem gera e como gera?

Premissas:b) Apenas 15% dos projetos atendem as necessidades do

cliente.

Análise de Negócios: Valor quem gera e como gera?

Soluções:b) 30-40% dos projetos que adotam

metodologias ágeis atendem as necessidades do cliente.

Análise de Negócios: Valor quem gera e como gera?

Mas onde está o valor?

O valor não está na solução que entregamos para o cliente, mas sim na solução que resolve o problema de um cliente;

Análise de Negócios: Valor quem gera e como gera?

O que é valor?

Se fosse possível definir, seria mais ou menos isto:

Valor = Benefício / Custo

Análise de Negócios: Valor quem gera e como gera?

Quanto vale um momento feliz para você?

Análise de Negócios: Valor quem gera e como gera?

Qual é a diferença entre o Profissional de TI e o Traficante?

Análise de Negócios: Valor quem gera e como gera?

Desafio:a) Pensar em um produto em 5 minutos;b) Quem é o meu cliente (5 minutos)?c) Quais são os problemas do cliente e como resolveremos (5

minutos)?d) Quais os benefícios que o cliente terá em comprar nosso

solução (3 minutos)?

Análise de Negócios: Valor quem gera e como gera?

Notas:a) Se estivermos desenvolvendo

um produto inovador que não hajam concorrentes, ou o mercado não precisa desta solução ou então somos realmente inovadores;

Análise de Negócios: Valor quem gera e como gera?

Notas:b) Os benefícios para um cliente

geralmente estão relacionados com:✓ Dinheiro (permitir que fature mais

gastando menos);✓ Tempo (permitir aproveitar

melhor o tempo);✓ Segurança (acreditar que a solução

é adequada);

Análise de Negócios: Valor quem gera e como gera?

Notas:c) Não desperdice dinheiro da empresa em funcionalidades

que talvez não façam sentido para o seu cliente;d) Não desperdice tempo implementando N formas de

pagamento, saiba como o cliente compra primeiro.

Análise de Negócios: Valor quem gera e como gera?

E o valor, quem gera?a) TODOS os envolvidos em entregar uma solução para o

cliente;b) As pessoas com quem trabalhamos devem SABER o MOTIVO

pelo qual TRABALHAM!

Javascript: A Evolução do AngularJS

Palestrante: Rodrigo Branas

Mais informações em: http://www.thedevelopersconference.com.br/tdc/2015/florianopolis/trilha-javascript

Slide utilizado na apresentação:http://pt.slideshare.net/rodrigobranas/a-evoluo-do-angularjs

Javascript: A Evolução do AngularJS

Um pouco da minha história:a) Minha esposa também desenvolve com Angular;b) Estávamos caminhando pela Beira Mar Norte e minha

mulher perguntou: "E aquele ng-bind!?"

Javascript: A Evolução do AngularJS

Alguns pontos positivos:a) Estimula a criação de novos componentes;b) Facilita a automação através de testes;c) Facilita a exibição da view;d) Facilita a integração com o Back-end;e) Comunidade muito forte e atuante;f) É como casar com mulher rica, o futuro está garantido..

porque a mulher neste caso, é a Google;

Javascript: A Evolução do AngularJS

Alguns pontos positivos:g) 138 releases do angular (cada versão possui um super

poder);h) Cerca de 4k testes de unidade;i) Cerca de 50k testes em ambientes e navegadores;

Enfim, dá pra confiar!

Javascript: A Evolução do AngularJS

Arquitetura do Framework:a) View: o que o cliente vê;b) Controller: responsável pelo que

a View consome;c) Scope: o garçom que pega os

pedidos dos clientes, leva para a cozinha e traz os pratos prontos da cozinha para o cliente, ou seja,um Intermediador entre a View e o Controller.

Javascript: A Evolução do AngularJS

Dúvidas Gerais:a) Em que SCOPE eu estou!?

Você pode colocar {{ $id }} e ver os escopos.

Todos os números inferiores o ID do escopo apresentado estarão disponíveis, pois eles são herdados.

Javascript: A Evolução do AngularJS

Angular 2.0:a) Quem são?b) Como vivem?c) O que comem?d) De onde surgiram?e) Como se reproduzem?

Javascript: A Evolução do AngularJS

Angular 2.0: a) Estava tudo tão bom, porque está mudando?

✓ Utilização de novos recursos;✓ Melhorias consideráveis em desempenho;✓ Curva de aprendizado será menor (menos conceitos);✓ Aí você me pergunta.. Mas MUDOU MESMO né!?

○ A maioria das diretivas morreram;

Javascript: A Evolução do AngularJS

Angular 2.0: a) Ahm!?

Como!? Quem morreu!?✓ A maioria

das…diretivas!

a) ng-bind;b) ng-class;c) ng-style;d) ng-disabled;e) ng-show;f) ng-hide;

e) ng-src;f) ng-href;g) ng-blur;h) ng-change;i) ng-click;j) ...

Javascript: Testes automatizados de todos os tipos usando bibliotecas Javascript

Palestrante: Stefan Raphael A. Teixeira

Mais informações em: http://www.thedevelopersconference.com.br/tdc/2015/florianopolis/trilha-javascript

Slide utilizado na apresentação:http://pt.slideshare.net/stefanteixeira/tdc-2015-testes-automatizados-de-todos-os-tipos-utilizando-bibliotecas-javascript

Javascript: Testes automatizados de todos os tipos usando bibliotecas Javascript

Ferramentas para testes de unidade:a) Jasmine (http://jasmine.github.io/);b) Mocha (http://mochajs.org/);c) QUnit (https://qunitjs.com/);d) Karma (http://karma-runner.github.io/).

Javascript: Testes automatizados de todos os tipos usando bibliotecas Javascript

Assertions Libraries:a) Chai (http://chaijs.com/);b) ShouldJS (http://shouldjs.github.io/).

Javascript: Testes automatizados de todos os tipos usando bibliotecas Javascript

Testes de API:a) SuperTest (http://github.com/visionmedia/supertest);b) FrisbyJS (http://frisbyjs.com/).

Javascript: Testes automatizados de todos os tipos usando bibliotecas Javascript

Testes de UI:a) Protractor (https://angular.github.io/protractor/);b) Hodman (http://yahoo.github.io/hodman/);c) ZombieJS (http://zombie.js.org/);d) NightWatchJS (http://nightwatchjs.org/);e) WebDriverJS (http://webdriver.io/).

Javascript: Arquitetura Front-end para sistemas de larga escala

Palestrante: Gabriel Gottgtroy Zigolis

Mais informações em: http://www.thedevelopersconference.com.br/tdc/2015/florianopolis/trilha-javascript

Slide utilizado na apresentação:http://pt.slideshare.net/zigolis/frontend-architecture-for-large-scale-apps-gabriel-zigolis

Javascript: Arquitetura Front-end para sistemas de larga escala

Nota:a) Se o mundo acabasse hoje, sobrariam

as Baratas e o Javascript, de tão difundida que está a linguagem.

Javascript: Arquitetura Front-end para sistemas de larga escala

Java é tão ruim assim?a) DEPENDE...b) Porque quando alguém nos fala algo assim, não ouvimos e

tiramos o melhor de cada tecnologia ao invés de reclamar dela?

c) Pare e pense, muitos dos patterns que escrevemos hoje vieram do Java!

Javascript: Arquitetura Front-end para sistemas de larga escala

Java ou PHP?a) DEPENDE…b) Temos um conjunto de classes tanto

no PHP quanto no Java, que implementam uma API REST, ambas retornam um JSON..

Aí eu lhe pergunto: Faz diferença para o front-end consumir os dados do Java ou do PHP neste caso? NÃO! Então pare de mimimi..

Javascript: Arquitetura Front-end para sistemas de larga escala

Porque damos suporte para o IE ainda?a) Esta resposta é muito simples:

USUÁRIOS/NÚMEROS!b) Na Arezzo, a faixa etária de acesso está entre 20-65 anos;c) 90% dos acessos são do S.O Windows;d) Destes 90%, 15% dos acessos são provenientes do IE 8/9;

Javascript: Arquitetura Front-end para sistemas de larga escala

Porque damos suporte para o IE ainda?e) O portal tem um faturamento médio de 15 milhões/mês;f) 15% de 15 milhões/mês é maior que o salário seu e de sua

equipe, então, é por isto que ainda damos suporte ao IE 8/9;

Javascript: Arquitetura Front-end para sistemas de larga escala

Responsive ou Mobile?a) Você colocaria a responsabilidade um usuário

baixar um conteúdo que não será consumido em uma versão responsiva utilizando o plano de dados que temos no Brasil?

b) A equipe comercial vendeu o projeto responsivo como sendo a melhor opção (trazendo menos custos e maior retorno se comparado ao cenário atual);

Javascript: Arquitetura Front-end para sistemas de larga escala

Responsive ou Mobile?c) O cenário atual diz que, 20% das vendas da Shutz vem do

Mobile;d) Faturamento médio de 4 milhões/mês;e) No fim, as vendas caíram em torno de 80%, o que cobriria o

investimento em Mobile;f) Acha ainda que o comercial acertou em

orientar a escolha pelo responsivo?

Javascript: Arquitetura Front-end para sistemas de larga escala

RequireJS ou Browserify?a) Pare com isto! Não temos que comparar, cada um tem o seu

propóstio;b) RequireJS deve se utilizado para carregar JS sob demanda.

Javascript: Arquitetura Front-end para sistemas de larga escala

BackboneJS ou AngularJS?a) BackboneJS é uma library muito pequena (~7kb);b) AngularJS é um framework.

Javascript: Arquitetura Front-end para sistemas de larga escala

Porque não codificamos só com jQuery?a) Porque não faz sentido para os

negócios e requisitos que temos nos nossos projetos de hoje.

Enfim…Não existe mágica ou bala de prata, tudo DEPENDE, seja do seu time, conhecimento, maturidade ou requisitos de negócio..

Javascript: Automatizando de forma modular e estruturada grandes aplicações com Gulp

Palestrante: Anderson Aguiar

Mais informações em: http://www.thedevelopersconference.com.br/tdc/2015/florianopolis/trilha-javascript

Slide utilizado na apresentação:http://www.slideshare.net/andersonagr/automatizando-grandes-aplicaes-de-forma-modular-e-estruturada-com-gulp

Javascript: Automatizando de forma modular e estruturada grandes aplicações com Gulp

Por que automatizar?a) Melhorar a qualidade;b) Não realizar tarefas repetitivas;c) Entregar rapidamente;d) Seu tempo é precioso.

Javascript: Automatizando de forma modular e estruturada grandes aplicações com Gulp

Ferramentas disponíveis:a) Gulp (http://gulpjs.com/);b) Grunt (http://gruntjs.com/);c) Jake (http://jakejs.com/);d) Pint (http://www.pintjs.com/).

Javascript: Automatizando de forma modular e estruturada grandes aplicações com Gulp

Alguns plugins para o Gulp:a) browser-sync;b) esformatter;c) gulp-mocha;d) gulp-load-plugins;e) gulp-sass;f) gulp-less;g) gulp-stylus;h) gulp-uglify;

i) gulp-concat;j) gulp-imagemin;k) gulp-sourcemaps;l) gulp-bump;

m) gulp-zip;n) ...

Javascript: Automatizando de forma modular e estruturada grandes aplicações com Gulp

Quando usar Gulp e não o Grunt?a) Além do DEPENDE… (do projeto, da equipe, etc);b) O principal diferencial é que o Gulp é muito rápido, pois,

trabalha com o Unix Stream Pipe;c) Enquanto que, o Grunt tem mais plugins e está mais

maduro;

Javascript: Real Time com Node e Socket.io

Palestrante: Guilherme Oderdenge

Mais informações em: http://www.thedevelopersconference.com.br/tdc/2015/florianopolis/trilha-javascript

Javascript: Real Time com Node e Socket.io

O que é Websockets?a) É um protocolo que prove uma conexão (em um canal full-

duplex) sobre uma conexão TCP;b) É econômico e inteligente;c) Funciona na maioria dos browsers modernos;d) Nasceu para o propósito de tempo real para a web;e) Short e Long Polling são técnicas, websockets é uma

tecnologia;

Javascript: Real Time com Node e Socket.io

Socket.io?a) É para websockets o que jQuery é para o DOM;b) Roda somente em NodeJS;c) Para instalar: "npm install socket.io";d) Emit/On se referem a Input/Output;e) Socket mantém uma conexão ativa enquanto o cliente

estiver ativo, então faz-se necessário preocupar-se com segurança como em qualquer outra aplicação.

Javascript: Construindo interfaces componentizadas com React

Palestrante: Sérgio Rafael Siqueira

Mais informações em: http://www.thedevelopersconference.com.br/tdc/2015/florianopolis/trilha-javascript

Javascript: Construindo interfaces componentizadas com React

O que é o React?a) É uma biblioteca que tem o foco no usuário.

Javascript: Construindo interfaces componentizadas com React

Você já utilizou React?a) Se disser não, mentiu! O facebook mantém e implementa o

react em sua rede social;b) https://github.com/facebook/react

Javascript: Construindo interfaces componentizadas com React

Interface de usuário no front-end:a) Handlebars (http://handlebarsjs.com/);b) Mustache (https://mustache.github.io/);c) Underscore (http://underscorejs.org/).

Obrigado!

<?phpreturn array(

'name' => 'João Paulo Cercal','github' => '@jpcercal',

);