22
Na com CEJS - Fortaleza - Ceará - Brazil [email protected] [email protected] @rsvalerio

Apresentação CEJS - Do nada para a nuvem

Embed Size (px)

Citation preview

Lembra daquela idéia?

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

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-enddo Zeno Rocha

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!!!

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

● 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

Calma Arnold, vamos olhar novamente

Superheroic JavaScript MVW FrameworkHTML 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.

Calma Arnold, vamos olhar novamente

● Routes● Dependency Injection● Controller● Services● Models● Directives● Filters

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

Mão na massa...

Criar uma app simples de exemplo!

Conta - usuario - email

Ambiente de desenvolvimentoNodeJS - 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

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

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?

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?

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?

● 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

About YeomanABOUT

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.

About AngularJSTagline 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: [email protected]: freenode.net #angularjsweb: http://angularjs.orggoogle+: google.com/+AngularJS

About Apache CouchDBCouchDB 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

About CloudantCloudant 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/