SlideShare a Scribd company logo
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
• 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 define

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
Built with Meteor
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 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/
Live in Rome?
http://www.meetup.com/Meteor-Rome/
<thanks>
Questions?
</thanks>
Enrico Risa @wolf4ood

More Related Content

What's hot (11)

PDF
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
Hamdi Hmidi
 
PPTX
Html 5
Nguyen Quang
 
PPTX
Industrial training seminar ppt on asp.net
Pankaj Kushwaha
 
PPTX
Alfresco Tech Talk Live (Episode 70): Customizing Alfresco Share 4.2
Richard Esplin
 
PDF
High performance website
Chamnap Chhorn
 
PDF
Ch. x web performance
Manolis Vavalis
 
PPTX
Introduction to asp.net
Melick Baranasooriya
 
PPTX
Asp Net Advance Topics
Ali Taki
 
PPTX
Introduction to MERN
ShyamMohanKunwar
 
PDF
Codeigniter
Joram Salinas
 
PPT
Asp.net
Dinesh kumar
 
Les Basiques - Web Développement HTML5, CSS3, JS et PHP
Hamdi Hmidi
 
Html 5
Nguyen Quang
 
Industrial training seminar ppt on asp.net
Pankaj Kushwaha
 
Alfresco Tech Talk Live (Episode 70): Customizing Alfresco Share 4.2
Richard Esplin
 
High performance website
Chamnap Chhorn
 
Ch. x web performance
Manolis Vavalis
 
Introduction to asp.net
Melick Baranasooriya
 
Asp Net Advance Topics
Ali Taki
 
Introduction to MERN
ShyamMohanKunwar
 
Codeigniter
Joram Salinas
 
Asp.net
Dinesh kumar
 

Similar to Meteor - Codemotion Rome 2015 (20)

PDF
Understanding meteor
M A Hossain Tonu
 
PPTX
Laurentiu macovei meteor. a better way of building apps
Codecamp Romania
 
PDF
Introduction to Meteor - Worldwide Meteor Day
M A Hossain Tonu
 
PPTX
Meteor Introduction - Ashish
Entrepreneur / Startup
 
PPTX
Meteor intro-2015
MeteorJS
 
PDF
Getting Started with Meteor (TCF ITPC 2014)
Michael Redlich
 
PDF
MeteorDay Copenhagen
Lars Buur
 
PPTX
Plone FSR
fulv
 
PDF
Meteor Revolution: From DDP to Blaze Reactive Rendering
Massimo Sgrelli
 
ODP
code-camp-meteor
meghna gogna
 
PDF
Intro to meteor @py gotham Aug 15-16 2015
christieewen
 
PDF
Meteor day Oslo
Pavel Kurnosov
 
PDF
Polymer 101
Alea Soluciones, S.L.
 
PDF
Getting Started with Meteor
Michael Redlich
 
PDF
The Meteor Framework
Damien Magoni
 
PDF
Meteor + polymer = a perfect synthesis
Fabian Kromer
 
PDF
CraftCamp for Students - Introduction to Meteor.js
craftworkz
 
PPTX
Meteor Rails-2015
MeteorJS
 
PDF
Intro to Meteor [Deprecated]
MeteorJS
 
PPTX
Introduction to meteor
NodeXperts
 
Understanding meteor
M A Hossain Tonu
 
Laurentiu macovei meteor. a better way of building apps
Codecamp Romania
 
Introduction to Meteor - Worldwide Meteor Day
M A Hossain Tonu
 
Meteor Introduction - Ashish
Entrepreneur / Startup
 
Meteor intro-2015
MeteorJS
 
Getting Started with Meteor (TCF ITPC 2014)
Michael Redlich
 
MeteorDay Copenhagen
Lars Buur
 
Plone FSR
fulv
 
Meteor Revolution: From DDP to Blaze Reactive Rendering
Massimo Sgrelli
 
code-camp-meteor
meghna gogna
 
Intro to meteor @py gotham Aug 15-16 2015
christieewen
 
Meteor day Oslo
Pavel Kurnosov
 
Getting Started with Meteor
Michael Redlich
 
The Meteor Framework
Damien Magoni
 
Meteor + polymer = a perfect synthesis
Fabian Kromer
 
CraftCamp for Students - Introduction to Meteor.js
craftworkz
 
Meteor Rails-2015
MeteorJS
 
Intro to Meteor [Deprecated]
MeteorJS
 
Introduction to meteor
NodeXperts
 
Ad

More from Codemotion (20)

PDF
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Codemotion
 
PDF
Pompili - From hero to_zero: The FatalNoise neverending story
Codemotion
 
PPTX
Pastore - Commodore 65 - La storia
Codemotion
 
PPTX
Pennisi - Essere Richard Altwasser
Codemotion
 
PPTX
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Codemotion
 
PPTX
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Codemotion
 
PPTX
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Codemotion
 
PPTX
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Codemotion
 
PDF
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Codemotion
 
PDF
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Codemotion
 
PDF
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Codemotion
 
PDF
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Codemotion
 
PDF
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Codemotion
 
PDF
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Codemotion
 
PPTX
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
Codemotion
 
PPTX
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
Codemotion
 
PDF
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Codemotion
 
PDF
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Codemotion
 
PDF
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Codemotion
 
PDF
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Codemotion
 
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Codemotion
 
Pompili - From hero to_zero: The FatalNoise neverending story
Codemotion
 
Pastore - Commodore 65 - La storia
Codemotion
 
Pennisi - Essere Richard Altwasser
Codemotion
 
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Codemotion
 
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Codemotion
 
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Codemotion
 
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Codemotion
 
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Codemotion
 
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Codemotion
 
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Codemotion
 
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Codemotion
 
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Codemotion
 
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Codemotion
 
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
Codemotion
 
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
Codemotion
 
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Codemotion
 
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Codemotion
 
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Codemotion
 
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Codemotion
 
Ad

Meteor - Codemotion Rome 2015