Meteor - Codemotion Rome 2015
-
Upload
codemotion -
Category
Documents
-
view
250 -
download
0
Transcript of Meteor - Codemotion Rome 2015
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!
$ meteor create myapp
$ cd myapp
$ meteor
$ meteor deploy myapp.meteor.com
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
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')
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
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
Shadow DOM
DOM/CSS/JS Encapsulation
Shadow DOM separates content from presentation thereby eliminating naming conflicts and improving code expression
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 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)
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/