meteor + polymer
TRANSCRIPT
Enrico Risa Codemotion
Agenda
1. Meteor
2. Polymer
3. Meteor + Polymer ( Demo )
Who am i?
Lead Enterprise Engineer at Orient Technologies LTD
Hacking the web since 2005
Who are you?
What is Meteor?
Meteor is a complete open source platform for building web and mobile apps
in pure JavaScript• Javascript
Isomorphic - Client, Server, Database
• ReactiveBlaze, 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 defineTodos = 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)
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
Built with Meteor
Meteor Numbers
Over 200 meetup groups around the worldhttp://meteor.meetup.com
Over 4500 packages publishedhttps://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 polyfills- 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 conflicts 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>
Create your own elements
Vulcanize
Process Web Components in a single file
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)
{{< demo}}
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/
<thanks> Questions?
</thanks>
Enrico Risa @wolf4ood