Apresentação CEJS - Do nada para a nuvem

1. Na com
CEJS - Fortaleza - Ceará - Brazil
cearajs@googlegroups.com
rsvalerio@gmail.com
@rsvalerio

2. Lembra daquela idéia?

3. Editor

4. Eles estão aqui para ajudar!
Ferramentas e APIs para criar o projeto, criar outros
artefatos, validação de sintaxe, otimizar html, js, css e
imagens.
http://yeoman.io/whyyeoman.html
Superheroic Framework MVC em Javascript.
http://angularjs.org/
Apache CouchDB
Banco de dados NOSQL para a WEB. Persiste
documentos em JSON enviados e recebidos via http
através de uma API REST
http://couchdb.apache.org

5. Eles estão aqui para ajudar!
Sublime Text
Editor leve e rápido.
Gerenciamento de snippets diretamente como um gist, dá pra
selecionar um trecho de código, nomear e criar o snippet no
gist. Depois mac + K , pra pegar o código
O plugin SublimeLinter, valida o código (com jshint) e destaca os erros quando
salva.
Você pode criar multiplos cursores clicando com o mouse, segurando ctrl.
Mais um monte de coisas legais. Vale a pena conhecer.
Referência obrigatória em portugês:
Sublime Text 2 – Dicas para Desenvolvimento Front-end
do Zeno Rocha

6. Ahhh bom, "só" isso!
Uma nova ferramenta de build.
Um novo framework MVC em JAVASCRIPT!
E uma nova forma de persistência de dados,
nem SQL vai ter!!!

7. Ferramentas
● Compila seu coffee script / type script
● Gera um arquivo de manifest .htacces (arquivo de
configuração do apache) para você (CORS, compressão,
webfonts, otimização de cache, entre outras coisas)
● Analisa seu código com JS Hint e falha o build caso
encontre erros

8. ● Concatena (junta vário arquivos em um) e "minifica"
(jquery.js - jquery.min.js?) seus HTMLs, CSSs e JSs em
um único arquivo
● Executa seus testes em vários browsers (obrigado ao
testacular por isso
● Detecta suas alterações em tempo de desenvolvimento
e atualiza o browser quando você salva um arquivo .js
ou .html
● Otimiza suas imagens jpg com jpegtran e png com
optipng
Calma Arnold, vamos olhar
novamente

9. Calma Arnold, vamos olhar
novamente
Superheroic JavaScript MVW Framework
HTML is great for declaring static documents, but it falters when we
try to use it for declaring dynamic views in web-applications.
AngularJS lets you extend HTML vocabulary for your application.
The resulting environment is extraordinarily expressive, readable,
and quick to develop.
Criado pelo google.
Destaque pra separação de código promovida pelas
diretivas (directive), juntamente com data binding
bi-direcional.

10. Calma Arnold, vamos olhar
novamente
● Routes
● Dependency Injection
● Controller
● Services
● Models
● Directives
● Filters

11. Calma Arnold, vamos olhar
novamente
yeoman init angular:route usuario
- Cria o arquivo .js para o controller e adiciona na página
- Cria o arquivo .js de test unitário
- Cria o arquivo .html que representa a visão dessa rota
- Adiciona a rota no arquivo app.js, apontando para o
controller e para a view criada

12. Mão na massa...
Criar uma app simples de exemplo!
Conta
- usuario
- email

13. Ambiente de desenvolvimento
NodeJS
- Têm instalador para windows e instala via gerenciadores de pacotes mais
comuns para linux e macosx (apt-get, yum, homebrew)
- http://nodejs.org
Yeoman
- sudo npm install -g yeoman
- //sudo npm install -g https://github.com/sebv/yeoman/blob/master/dist/yeoman-cli.tar.gz?raw=true
Couchapp
- npm install -g couchapp
Seu editor de código preferido

14. E a nuvem?
Publicar no couchdb local ou no cloudant.com ou no iriscouch.com
Adicionar o redirecionamento para poder apontar o domínio.
De dentro da pasta do projeto:
couchapp push couchapp.conf.js
https://rsvalerio:******@rsvalerio.cloudant.com/cejs
Acessar a aplicação na web:
https://cloudant.com/db/rsvalerio/cejs/_design/app/_rewrite

15. Access your documents with your web browser, via HTTP. Query,
combine, and transform your documents with JavaScript.
CouchDB works well with modern web and mobile apps.
You can even serve web apps directly out of CouchDB. And you can
distribute your data, or your apps, efficiently using CouchDB’s
incremental replication. CouchDB supports master-master setups
with automatic conflict detection.
Apache CouchDB
É da apache
O logotipo é uma poltrona com um folgadão sentado, isso não pode ser ruim! ;)
Pra nós, o melhor é a capacidade de hospedar a aplicação (couchaapp)
juntamente com os dados, bem como o fácil acesso via http (REST API).
Podemos utilizar alguma opção online: http://www.cloudant.com,
http://www.iriscouch.com/ ou ainda instalar um couchdb na amazon, etc.
E a nuvem?

16. COUCHAPPs
O Couchdb têm a capacidade de "hospedar" nossa aplicação.
Ao invés de fazer o deploy na aplicação no apache, nginx, tomcat ou iis, fazemos no
couchdb.
Gravar um documento do couchdb, é tão simples quanto fazer uma requisição
ajax.
E a nuvem?

17. COUCHAPPs
1 - Couchdb permite criação de funções para validação de documentos, antes de
persisti-los, ou seja, código sendo executado no servidor.
2 - Couchdb + couch-lucene, resolve qualquer problema de consulta que você possa
ter com views e map+reduces do couchdb. Têm fulltext search (estilo google).
3 - Couchdb têm um suporte único a replicação, master-master!
4 - Temos couchdb rodando em iphone e android com Touchdb
5 - Sincronizar um dispositivo móvel ou desktop com o servidor? Molezinha
proporcionada pelos itens 3 e 4.
6 - A sincronização do item 5, inclui a própria aplicação, lembra que ela reside no
couchdb, junto com os dados?
E a nuvem?

18. ● Journey Through The JavaScript MVC Jungle
● AngularJS - Superheroic JavaScript MVC Framework
● 5 Awesome AngularJS Features
● Instador nodejs no ubuntu com gerenciador de pacotes
● Introdução AngularJS
● Sublime Text 2 - Zeno Rocha
● Antes de publicar vou colocar mais links
Links

19. About Yeoman
ABOUT
Yeoman is a project developed by Paul Irish, Addy
Osmani, Sindre Sorhus, Mickael Daniel, Eric Bidelman, and the Yeoman
Community.
It's built upon many projects including Ben Alman's
awesome work on Grunt and Mickael's work on the HTML5 Boilerplate Node
Build Script.

20. About AngularJS
Tagline AngularJS
- Superheroic JavaScript MVW Framework
Introduction AngularJS is a JavaScript framework for building web
applications with HTML, JavaScript and CSS. It offers
powerful data-binding, dependency injection, guidelines for
structuring your app and other useful goodies to make your
webapp testable and maintainable.
Contact info email: angular@googlegroups.com
irc: freenode.net #angularjs
web: http://angularjs.org
google+: google.com/+AngularJS

21. About Apache CouchDB
CouchDB is a database that completely embraces the web.
Store your data with JSON documents. Access your documents with your web browser, via HTTP.
Query, combine, and transform your documents with JavaScript. CouchDB works well with modern
web and mobile apps. You can even serve web apps directly out of CouchDB. And you can distribute
your data, or your apps, efficiently using CouchDB’s incremental replication. CouchDB supports
master-master setups with automatic conflict detection.
CouchDB comes with a suite of features, such as on-the-fly
document transformation and real-time change notifications, that makes web app development a
breeze. It even comes with an easy to use web administration console. You guessed it, served up
directly out of CouchDB! We care a lot about distributed scaling. CouchDB is highly available and
partition tolerant, but is also eventually consistent. And we care a lot about your data. CouchDB has a
fault-tolerant storage engine that puts the safety of your data first.
See the introduction, technical overview, or one of the
guides for more information.
http://couchdb.apache.org/#about

22. About Cloudant
Cloudant was founded in Cambridge,
Massachusetts in 2008 by three MIT physicists who at the time were moving
multi-petabyte data sets around from the Large Hadron Collider. Frustrated by
the available tools for managing and analyzing Big Data in their research, the
founders built a distributed, fault-tolerant, globally scalable data layer on top of
Apache CouchDB.
The service has grown since then. The team now
manages and serves mobile and web app data on behalf of thousands of
developers and hundreds of customers to their users around the world.
And we're still growing.
https://cloudant.com/about-us/