Meteor - Codemotion Rome 2015

Agenda
1. Meteor
2. Polymer
3. Meteor + Polymer ( Demo )

Who am i?
Lead Enterprise Engineer at Orient Technologies LTD
Hacking the web since 2005

What is Meteor?
Meteor is a complete open source platform
for building web and mobile apps
in pure JavaScript
• Javascript 
Isomorphic - Client, Server, Database
• Reactive 
Blaze, Database everywhere
• Web, Mobile
• Packages

7 Principles
One Language
Data on the Wire
Database Everywhere
Latency Compensation
Full-Stack Reactivity
Embrace the Ecosystem
Simplicity = Productivity

Quick Start!
$ curl https://install.meteor.com/ | sh

Quick Start!
$ meteor create myapp
$ cd myapp
$ meteor
$ meteor deploy myapp.meteor.com

App Structure
/client
/server
/public
/lib
/tests

Components
LiveQuery - Live Database Connectors 
- Realtime database queries.
DDP - Distributed Data Protocol 
-Subscribe to changes in the database.
Mini Databases - Database in memory Javascript (MiniMongo) 
- Run database queries in the client
Tracker - Reactive Programming 
-Rerun functions when data changes
Blaze 
-Keep the view up-to-date with your data
Session 
-A library to handle reactive UI state variables

Template
Spacebars (Handlebars inspired)

Template Helpers
Helpers are simply Javascript methods that
you make available to template

Template Events
Register events to elements in a particular template

Meteor Collections
Simple to deﬁne 
Todos = new Mongo.Collection(‘todos’);
Collections.[insert | update | remove] available client/
server side.

Meteor Subscriptions
Remove “autopublish” & “insecure”
Server Side
Client Side Meteor.subscribe('todos')

Meteor Methods
Server Side
Client Side
Client/Server Communication

Packages
Routing (Iron Route)
UI (Bootstrap3/Foundation)
Mail
Accounts
Security
….
https://atmospherejs.com
meteor add package

Iron Route
Client and Server
side router
MVC
Controllers
Data
Subscriptions
http://manuel-schoebel.com/blog/iron-router-tutorial

Meteor Numbers
Over 200 meetup groups around the world 
http://meteor.meetup.com
Over 4500 packages published 
https://atmospherejs.com
Ranked #11 on GitHub
Raised $11m in 2012

What is Polymer?
A library built on top of Web Components and enable
developers to create reusable elements for the web
Let us use Web Components today in modern browser
Composed By 
- A set of polyﬁlls 
- Web application framework 
- Set of UI components (Material Design)

Web Components
Custom Elements
Shadow DOM
Templates
HTML imports
W3C Standard
http://www.w3.org/TR/components-intro

Custom Elements
create new HTML/DOM elements
declarative HTML

Shadow DOM
DOM/CSS/JS Encapsulation
Shadow DOM separates content from presentation
thereby eliminating naming conﬂicts and improving
code expression

Templates
Native templating in the browser
Polymer implements data-binding

HTML imports
Loading and dependency management
Find existing elements
Import and just use it
<link rel="import" href="/bower_components/paper-input/paper-input.html">

How do I use Polymer?
Using Elements 
- Polymer Elements (Core/Paper) 
- Community Elements
Creating Elements

Core/Paper Elements
Polymer's core elements are a set of visual and non-
visual utility elements. 
Polymer's paper elements collection implements
material design for the web.
polymer-project.org/0.5/docs/elements

Using Elements
http://customelements.io
https://googlewebcomponents.github.io
http://component.kitchen
<lastfm-card user="maggiolo00"> 
</lastfm-card>

Vulcanize
Process Web Components in a single ﬁle
Map your components in “imports.html” to  
<head></head>
Useful in production

Meteor + Polymer = <3
Great Result
Easy to use Both within an app
Polymer elements emit events like normal DOM elements
Polymer for Web Components and Material Design
Meteor for data synch, realtime and rendering
Example app 
- polymer-demo 
- usercycle

Integration Concern
Still experimental
Lack of resources
Polymer bleeding edge < 1.0
Web Components not fully supported 
( are-we-componentized-yet )
Native support (Chrome only)

Resources
http://blog.differential.com/meteor-polymer
http://grigio.org/
polymer_and_meteorjs_holy_grail_web_development
http://blog.usercycle.com/why-meteor-and-polymer/

Live in Rome?
http://www.meetup.com/Meteor-Rome/

<thanks>
Questions?
</thanks>
Enrico Risa @wolf4ood

Meteor - Codemotion Rome 2015

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (11)

Similaire à Meteor - Codemotion Rome 2015

Similaire à Meteor - Codemotion Rome 2015 (20)

Plus de Codemotion

Plus de Codemotion (20)

Meteor - Codemotion Rome 2015