Top Banner
METEOR DE PEGASUS DESENVOLVENDO APLICAÇÕES WEB COM METEOR.JS
31

Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

Aug 16, 2015

Download

Software

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

METEOR DE PEGASUSDESENVOLVENDO APLICAÇÕES WEB COM METEOR.JS

Page 2: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

Meteor is developed by the Meteor Development Group. Thestartup was incubated by Y Combinator and received

$11.2MM in funding from Andreessen Horowitz in July 2012.

HISTORY

https://en.wikipedia.org/wiki/Meteor_(web_framework)

Page 3: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

ONE LANGUAGE

Node - backJavascript - frontMongodb - database

Page 4: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

REUNIÃO DE LIBSSockjs - framework emulador de websocket e responsavel pelo funcioamendto do protocolo DDP

Websocket-based data protocol DDP is like "REST for websockets". Like REST, it is a simple, pragmatic approach toproviding an API. But it is websocket-based, unlike REST, allowing it to be used to deliver live updates as datachanges. Implementation of DDP is simple (it's just a few JSON messages over a websocket) and the spec fits on acouple of pages.

MongoDB - duh

Page 5: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

REUNIÃO DE LIBS2Handlebars - template enginePubSub - lib de emissao e escuta de eventos via patter pubsubMiniMongo - API clinet-side que possui a maioria das funcionalidades do mongodb (mongodb no front)

The minimongo package is a reimplementation of (almost) the entire MongoDB API, against an in-memoryJavaScript database. It is like a MongoDB emulator that runs inside your web browser. You can insert data into it andsearch, sort, and update that data.

Connect - modulo node com funcionalidades para trabalhar com protocolo HTTP

Page 6: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

SOCKJSSockJS is a browser JavaScript library that provides a WebSocket-like object. SockJS gives you a coherent, cross-

browser, Javascript API which creates a low latency, full duplex, cross-domain communication channel between thebrowser and the web server. Under the hood SockJS tries to use native WebSockets first. If that fails it can use a variety of

browser-specific transport protocols and presents them through WebSocket-like abstractions. SockJS is intended towork for all modern browsers and in environments which don't support the WebSocket protocol -- for example, behind

restrictive corporate proxies. SockJS-client does require a server counterpart:

Page 7: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

OS 7 PRÍNCIPIOS DOMETEOR

Data on the wire: Não envie HTML pela rede e sim apenas dados para deixar o cliente decidir como renderizá-lo.One language: Escreva código Javascript em ambas camadas: cliente e servidor.Database anywhere: Utilize uma API de interface única e transparente que te permite acessar o banco de dados tanto nocliente como no servidor.Latency compensation: No cliente é usado prefetching e model simulation na API do banco de dados para atingir latênciazero no acesso de seus recursos.Full-Stack Reactivity: Por default tudo funciona em real-time. E todas as camadas da aplicação adotam o paradigmaorientado à eventos, que é herdado do Node.js.Embrace the ecosystem: Totalmente open-source o Meteor possui suas convenções pelo qual agrega novos valores aoinvés de ser ferramenta uma que vai substituir outros frameworks atuais.Simplicity equals Productivity: Seja produtivo! Desenvolva de forma simplificada, utilize APIs fáceis de aprender eimplementar, afinal essa será a melhor forma de criar uma aplicação.

Page 8: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

HTTPS://WWW.METEOR.COM/TRY/

Page 9: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

PACKAGE MANAGERPROPRIO

HTTPS://ATMOSPHEREJS.COM/

Page 10: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

LIVE RELOAD!But only on the server ://

Page 11: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

TESTES :SVELOCITY

sanjo:jasmine - Write client and server unit and integration tests with Jasmine.mike:mocha - A Velocity version of mocha-web. Runs mocha tests in the Meteor context which is great for integrationtesting.xolvio:cucumber - Use BDD Gherkin-syntax cucumber to test your app. Includes PhantomJS and Selenium as well asSauceLabs support.rsbatech:robotframework - Robot Framework end to end test integration using Selenium and many other test libraries

Big news! Work is underway on Velocity, the official testing framework for Meteor. July 14, 2014 By Alice Yu

Page 12: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

SUCCESS CASES

Page 13: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

SUPPORTEDBROWSERS

METEOR IS ACTIVELY TESTED BY MDG TO WORK PROPERLYON THE FOLLOWING BROWSERS:

Android stock browser (Webkit based)ChromeFirefox 7+iOS browserIE8+Safari 4+Desktop OperaMobile Opera

src: http://meteorpedia.com/read/Supported_Browsers (2014-06-19)

Page 14: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

WHEN NOT TO USEMETEOR

Meteor is best suited for Single-Page Apps, and less suited: relational mindsFor graphics-heavy mobile games, it may be better to build a native appFor applications with very large numbers of concurrent connections, Meteor might require larger amounts of RAMScaling - if you need Facebook-scale now, Meteor is not the best solution LOL

-- Dan Dascalescu, @dandv

Page 15: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

WHAT METEOR LACKSNative reactive "joins" for MongoDBA native mechanism to load templates dynamicallyTwo-way data binding as in AngularNative server-side rendering (useful for SEO).Production-ready support for Windows (Risos)Easy explicit control over file load orderingOne blessed or recommended package for a given 3rd party library you find in its package repository, Atmosphere. TheAtmosphere is still in need of cleanup

-- Dan Dascalescu, @dandv

Page 16: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

.METEORThe build folder

INTEGRAÇAO COM PACKAGE.JSONBUILT IN MONGODB AND SERVERObs: Ids zuados! Não já ObjectId

Page 17: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

WTF!

Page 18: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS
Page 19: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

REALTIME DESGRAÇA!

Page 20: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

WHAT BELONGS TOWHO

Page 21: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

MONGO ON THEFRONT!

insecure: Meteor also has a special "insecure mode" for quickly prototyping new applications. In insecure mode, if youhaven't set up any allow or deny rules on a collection, then all users have full write access to the collection. This is the onlyeffect of insecure mode.Autopublish: self explained

Obs: Remova insecure e autopublish quanto antes do seu projeto

Page 22: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

REACTIVE TEMPLATE!BLAZE

http://meteor.github.io/blaze/

Page 23: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

LATENCYCOMPENSATION

There are only two places where you can do a writeoperation to a data store: inside a method call or directly via

a local collection.

Page 24: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

SEM LATENCY COMPENSATION :(// File: /client/app.js

Template.addPost.events({ "click button": function() { var title = $('#title').val(); var content = $('#content').val();

var post = { title: title, content: content };

Meteor.call('addPost', post, function(err, postId) { if(err) { alert(err.reason); } else { Router.go('/post/' + postId);

Page 25: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

COM LATENCY COMPENSATION :)// File: /client/app.jsTemplate.addPost.events({ "click button": function() { var title = $('#title').val(); var content = $('#content').val();

var post = { title: title, content: content, _id: Random.id() };

Meteor.call('addPost', post, function(err) { if(err) { alert(err.reason); } });

Page 26: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

PUBSUBMeteor.publish('Clients', function(){ return Clients.find({});});

Meteor.subscribe("Clients");

Page 27: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

MÃE, QUERO USARANGULAROU

EMBER.JS!NA NANANA NÃO, NOT A GOOD IDEA.

Page 28: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

QUANDO USARMETEOR EM UMA

APLICAÇÃO?

Page 29: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

GOOD PACKAGES!accounts-base 1.1.3* A user account systemaccounts-meteor-developer 1.0.3* Login service for Meteor developer accountsaccounts-password 1.0.6* Password support for accountsaccounts-ui 1.1.4* Simple templates to add login widgets to an appalanning:roles 1.2.13 Role-based authorizationaldeed:autoform 4.2.2* Easily create forms with automatic insert and update, and automatic reactive validation.aldeed:collection2 2.3.2* Automatic validation of insert and update operations on the client and server.aldeed:simple-schema 1.3.0* A simple schema validation object with reactivity. Used by collection2 and autoform.cfs:filesystem 0.1.1* Filesystem storage adapter for CollectionFScfs:gridfs 0.0.27* GridFS storage adapter for CollectionFScfs:standard-packages 0.5.3* Filesystem for Meteor, collectionFSemail 1.0.5* Send email messagesinsecure 1.0.2* Allow all database writes by defaultiron:router 1.0.7 Routing specifically designed for Meteormeteor-platform 1.2.1* Include a standard set of Meteor packages in your appmeteorhacks:npm 1.2.2* Use npm modules with your Meteor Appmizzao:user-status 0.6.4 User connection and idle state tracking for Meteornpm-container 1.0.0+ Contains all your npm dependenciesokgrow:iron-router-autoscroll 0.0.7* Fixes page position after changing pages using Iron Routerpascoual:pdfkit 1.0.5 PDFKit, the PDF generation libraryyogiben:admin 1.1.0* A complete admin dashboard solutionyogiben:autoform-file 0.2.0* File upload for AutoForm

Page 30: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

HTTP://WWW.TELESC.PE/

Page 31: Meteoro de pegasuus! Desenvolvendo aplicações realtime com MeteorJS

[email protected] *.*