SlideShare a Scribd company logo
1 of 26
Build Realtime Web and Mobile Apps With Angular and
Meteor
22 October 2015 - Angular Meetup Oslo
Do you know MEAN stack ?
So, what is Meteor?
Meteor is an ultra-simple environment for building modern websites
Meteor is two things:
A library of packages: pre-written, self-contained modules that you might need in your app
A command-line tool called meteor
Principles of Meteor
Data on the Wire
One Language
Database Everywhere
Latency Compensation
Full Stack Reactivity
Embrace the Ecosystem
Simplicity Equals Productivity
Structuring your application
Free to play :)
But few rules for file loading:
• HTML template files are always loaded before everything else
• Files beginning with main. are loaded last
• Files inside any lib/ directory are loaded next
• Files with deeper paths are loaded next
• Files are then loaded in alphabetical order of the entire path
Meteor framework
Meteor makes writing distributed client code as simple as talking to a local database
The client and server share the same database API
Most Meteor apps use MongoDB
But, they working on support on other DB as well:
Meteor Livequery
// declare collections
// this code should be included in both the client and the server
Parties = new Mongo.Collection("parties");
// server: populate collections with some initial documents
Parties.insert({name: "Super Bowl Party"});
// server: publish the set of parties the logged-in user can see.
Meteor.publish("parties", function () {
return Parties.find({$or: [{"public": true},
{invited: this.userId},
{owner: this.userId}]});
});
// client: start a parties subscription
Meteor.subscribe("parties");
// client: return array of Parties this client can read
return Parties.find().fetch(); // synchronous!
MongoDB
Security
// server: don't allow client to insert a party
Parties.allow({
insert: function (userId, party) {
return false;
}
});
// client: this will fail
var party = { ... };
Parties.insert(party);
Reactivity
Meteor's implementation is a package called Tracker
Tracker.autorun(function () {
Meteor.subscribe("messages", Session.get("currentRoomId"));
});
Distributed Data Protocol
Simple protocol for fetching structured data from a server, and receiving live updates when that data changes.
DDP implementations
Android
AS3 (ActionScript3)
C#
Dart
Go
Haskell
iOS
Java
JavaScript
.NET
Node.JS
Objective C (iOS)
PHP
Python
Qt / QML
Ruby
Authentication
Meteor Accounts package
Facebook, GitHub, Google, Meetup, Twitter, Weibo and more…
$ meteor add accounts-password accounts-ui
Blaze
<div class="friendList">
<ul>
{{#each friends}}
<li class="{{#if selected}}selected{{/if}}">
{{firstName}} {{lastName}}
</li>
{{/each}}
</ul>
</div>
Powerful library for creating live-updating user interfaces
Tools and Services
METEOR TOOL
DEVELOPER ACCOUNTS
ATMOSPHERE
Galaxy service
But Blaze is just one module that we can easily replace with another
AngularJs
Why Meteor?
• Best or one of the best :) real time backend for AngularJS
• Super easy, Real-time integration with the database
• Full stack and open source
• Great Cordova integration
• Easy deployment
Why use AngularJS?
• MVC and MVVM structure on the client
• Use existing applications
• Ecosystem and community
• Easy entrance to Meteor
• Angular 2.0
Don’t choose one solution
Use both Blaze and AngularJS
Use libraries, packages and solutions from both communities
Give neutral perspective on the two frameworks
So, what it gives you
Real Time Data Sync and Store
$meteor.collection(collection, autobind)
User authentication
List of helpers that allows you integrate your code with meteor accounts
1 $stateProvider
2 .state('home', {
3 url: '/',
4 templateUrl: 'client/views/home.ng.html',
5 controller: 'HomeController'
6 resolve: {
7 "currentUser": ["$meteor", function($meteor){
8 return $meteor.requireUser();
9 }]
10 }
11 });
FullStack Angular applications with Angular-Server
1 // server/startup.js
2 angular.bootstrap(['todoMVC']);
How to use it ?
1 // server/api/calculator.js
2 angular.module('myApp').service('Calculator', function() {
3 this.add = function(a, b) {
4 return a + b;
5 };
6 });
1 // server/api/apis.js
2 angular.module('myApp').config(function(ServerAPIProvider) {
3 ServerAPIProvider.register('Calculator');
4 });
Register it
Use it
1 // client/controllers/main.js
2 angular.module('myApp').controller('MainCtrl', function(Calculator) {
3 $scope.currentResult = 0;
4
5 $scope.add = function(value) {
6 Calculator.add($scope.currentResult, value).then(function(result) {
7 $scope.currentResult = result;
8 });
9 };
10 });
A Clear Migration Path to Angular 2.0
Angular 2 Now
Angular 2.0.0-alpha
Time for demo!

More Related Content

What's hot

Fullstack workshop
Fullstack workshopFullstack workshop
Fullstack workshopAssaf Gannon
 
A Whirldwind Tour of ASP.NET 5
A Whirldwind Tour of ASP.NET 5A Whirldwind Tour of ASP.NET 5
A Whirldwind Tour of ASP.NET 5Steven Smith
 
.Net: Introduction, trends and future
.Net: Introduction, trends and future.Net: Introduction, trends and future
.Net: Introduction, trends and futureBishnu Rawal
 
Building a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet coreBuilding a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet coreMike Melusky
 
ASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bitsASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bitsKen Cenerelli
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperMike Melusky
 
Configure an environnement for ASP.NET Core 2
Configure an environnement for ASP.NET Core 2Configure an environnement for ASP.NET Core 2
Configure an environnement for ASP.NET Core 2Michel Bruchet
 
Testing Microservices
Testing MicroservicesTesting Microservices
Testing MicroservicesAnil Allewar
 
Engage 2020: Hello are you listening, There is stream for everything
Engage 2020: Hello are you listening, There is stream for everythingEngage 2020: Hello are you listening, There is stream for everything
Engage 2020: Hello are you listening, There is stream for everythingFrank van der Linden
 
Container Orchestration for .NET Developers
Container Orchestration for .NET DevelopersContainer Orchestration for .NET Developers
Container Orchestration for .NET DevelopersMike Melusky
 
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Arrow Consulting & Design
 
Meteor intro-2015
Meteor intro-2015Meteor intro-2015
Meteor intro-2015MeteorJS
 
ASP.NET Core MVC + Web API with Overview (Post RC2)
ASP.NET Core MVC + Web API with Overview (Post RC2)ASP.NET Core MVC + Web API with Overview (Post RC2)
ASP.NET Core MVC + Web API with Overview (Post RC2)Shahed Chowdhuri
 
Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015Ido Flatow
 
Meteor presentation
Meteor presentationMeteor presentation
Meteor presentationscandiweb
 

What's hot (20)

Fullstack workshop
Fullstack workshopFullstack workshop
Fullstack workshop
 
A Whirldwind Tour of ASP.NET 5
A Whirldwind Tour of ASP.NET 5A Whirldwind Tour of ASP.NET 5
A Whirldwind Tour of ASP.NET 5
 
.Net: Introduction, trends and future
.Net: Introduction, trends and future.Net: Introduction, trends and future
.Net: Introduction, trends and future
 
Building a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet coreBuilding a Google Cloud Firestore API with dotnet core
Building a Google Cloud Firestore API with dotnet core
 
Serverless
ServerlessServerless
Serverless
 
ASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bitsASP.NET Core: The best of the new bits
ASP.NET Core: The best of the new bits
 
.Net Core 1.0 vs .NET Framework
.Net Core 1.0 vs .NET Framework.Net Core 1.0 vs .NET Framework
.Net Core 1.0 vs .NET Framework
 
Effective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and DapperEffective .NET Core Unit Testing with SQLite and Dapper
Effective .NET Core Unit Testing with SQLite and Dapper
 
Configure an environnement for ASP.NET Core 2
Configure an environnement for ASP.NET Core 2Configure an environnement for ASP.NET Core 2
Configure an environnement for ASP.NET Core 2
 
Testing Microservices
Testing MicroservicesTesting Microservices
Testing Microservices
 
Engage 2020: Hello are you listening, There is stream for everything
Engage 2020: Hello are you listening, There is stream for everythingEngage 2020: Hello are you listening, There is stream for everything
Engage 2020: Hello are you listening, There is stream for everything
 
Container Orchestration for .NET Developers
Container Orchestration for .NET DevelopersContainer Orchestration for .NET Developers
Container Orchestration for .NET Developers
 
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
Getting Started with ASP.NET Core 1.0 (formerly ASP.NET 5)
 
Meteor intro-2015
Meteor intro-2015Meteor intro-2015
Meteor intro-2015
 
ASP.NET Core MVC + Web API with Overview (Post RC2)
ASP.NET Core MVC + Web API with Overview (Post RC2)ASP.NET Core MVC + Web API with Overview (Post RC2)
ASP.NET Core MVC + Web API with Overview (Post RC2)
 
Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015
 
Docker presentation for sharing
Docker presentation   for sharingDocker presentation   for sharing
Docker presentation for sharing
 
Meteor presentation
Meteor presentationMeteor presentation
Meteor presentation
 
ASP.NET Core Unit Testing
ASP.NET Core Unit TestingASP.NET Core Unit Testing
ASP.NET Core Unit Testing
 
Docker Serverless
Docker ServerlessDocker Serverless
Docker Serverless
 

Similar to Meteor Angular

.NET,ASP .NET, Angular Js,LinQ
.NET,ASP .NET, Angular Js,LinQ.NET,ASP .NET, Angular Js,LinQ
.NET,ASP .NET, Angular Js,LinQAvijit Shaw
 
Plone FSR
Plone FSRPlone FSR
Plone FSRfulv
 
Understanding the Windows Azure Platform - Dec 2010
Understanding the Windows Azure Platform - Dec 2010Understanding the Windows Azure Platform - Dec 2010
Understanding the Windows Azure Platform - Dec 2010DavidGristwood
 
Cloud Deployment Toolkit
Cloud Deployment ToolkitCloud Deployment Toolkit
Cloud Deployment ToolkitBret Piatt
 
Vijay Oscon
Vijay OsconVijay Oscon
Vijay Osconvijayrvr
 
Creation of cloud application using microsoft azure by vaishali sahare [katkar]
Creation of cloud application using microsoft azure by vaishali sahare [katkar]Creation of cloud application using microsoft azure by vaishali sahare [katkar]
Creation of cloud application using microsoft azure by vaishali sahare [katkar]vaishalisahare123
 
The Meteor Framework
The Meteor FrameworkThe Meteor Framework
The Meteor FrameworkDamien Magoni
 
Deploy, Manage, and Scale your Apps with AWS Elastic Beanstalk
Deploy, Manage, and Scale your Apps with AWS Elastic BeanstalkDeploy, Manage, and Scale your Apps with AWS Elastic Beanstalk
Deploy, Manage, and Scale your Apps with AWS Elastic BeanstalkAmazon Web Services
 
Net Fundamentals
Net FundamentalsNet Fundamentals
Net FundamentalsAli Taki
 
ArcReady - Architecting For The Cloud
ArcReady - Architecting For The CloudArcReady - Architecting For The Cloud
ArcReady - Architecting For The CloudMicrosoft ArcReady
 
What's New in .Net 4.5
What's New in .Net 4.5What's New in .Net 4.5
What's New in .Net 4.5Malam Team
 
Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Codemotion
 
Meteor + Polymer
Meteor + PolymerMeteor + Polymer
Meteor + Polymerwolf4ood
 

Similar to Meteor Angular (20)

.NET,ASP .NET, Angular Js,LinQ
.NET,ASP .NET, Angular Js,LinQ.NET,ASP .NET, Angular Js,LinQ
.NET,ASP .NET, Angular Js,LinQ
 
Plone FSR
Plone FSRPlone FSR
Plone FSR
 
Serverless computing
Serverless computingServerless computing
Serverless computing
 
Understanding the Windows Azure Platform - Dec 2010
Understanding the Windows Azure Platform - Dec 2010Understanding the Windows Azure Platform - Dec 2010
Understanding the Windows Azure Platform - Dec 2010
 
Cloud Deployment Toolkit
Cloud Deployment ToolkitCloud Deployment Toolkit
Cloud Deployment Toolkit
 
Meteor js framework
Meteor js frameworkMeteor js framework
Meteor js framework
 
Angular meteor presentation
Angular meteor presentationAngular meteor presentation
Angular meteor presentation
 
dot NET Framework
dot NET Frameworkdot NET Framework
dot NET Framework
 
Vijay Oscon
Vijay OsconVijay Oscon
Vijay Oscon
 
Creation of cloud application using microsoft azure by vaishali sahare [katkar]
Creation of cloud application using microsoft azure by vaishali sahare [katkar]Creation of cloud application using microsoft azure by vaishali sahare [katkar]
Creation of cloud application using microsoft azure by vaishali sahare [katkar]
 
The Meteor Framework
The Meteor FrameworkThe Meteor Framework
The Meteor Framework
 
Deploy, Manage, and Scale your Apps with AWS Elastic Beanstalk
Deploy, Manage, and Scale your Apps with AWS Elastic BeanstalkDeploy, Manage, and Scale your Apps with AWS Elastic Beanstalk
Deploy, Manage, and Scale your Apps with AWS Elastic Beanstalk
 
Meteor Introduction - Ashish
Meteor Introduction - AshishMeteor Introduction - Ashish
Meteor Introduction - Ashish
 
Net Fundamentals
Net FundamentalsNet Fundamentals
Net Fundamentals
 
ArcReady - Architecting For The Cloud
ArcReady - Architecting For The CloudArcReady - Architecting For The Cloud
ArcReady - Architecting For The Cloud
 
Best node js course
Best node js courseBest node js course
Best node js course
 
What's New in .Net 4.5
What's New in .Net 4.5What's New in .Net 4.5
What's New in .Net 4.5
 
Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015Meteor - Codemotion Rome 2015
Meteor - Codemotion Rome 2015
 
Meteor + Polymer
Meteor + PolymerMeteor + Polymer
Meteor + Polymer
 
Real time web apps
Real time web appsReal time web apps
Real time web apps
 

Recently uploaded

ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...Christina Lin
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)OPEN KNOWLEDGE GmbH
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Andreas Granig
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxTier1 app
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024StefanoLambiase
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样umasea
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxsoftware engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxnada99848
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideChristina Lin
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - InfographicHr365.us smith
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based projectAnoyGreter
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEEVICTOR MAESTRE RAMIREZ
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...stazi3110
 

Recently uploaded (20)

ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
ODSC - Batch to Stream workshop - integration of Apache Spark, Cassandra, Pos...
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
 
Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024Automate your Kamailio Test Calls - Kamailio World 2024
Automate your Kamailio Test Calls - Kamailio World 2024
 
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort ServiceHot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
Hot Sexy call girls in Patel Nagar🔝 9953056974 🔝 escort Service
 
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptxKnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
KnowAPIs-UnknownPerf-jaxMainz-2024 (1).pptx
 
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
Dealing with Cultural Dispersion — Stefano Lambiase — ICSE-SEIS 2024
 
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
办理学位证(UQ文凭证书)昆士兰大学毕业证成绩单原版一模一样
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
software engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptxsoftware engineering Chapter 5 System modeling.pptx
software engineering Chapter 5 System modeling.pptx
 
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop SlideBuilding Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
Building Real-Time Data Pipelines: Stream & Batch Processing workshop Slide
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - Infographic
 
MYjobs Presentation Django-based project
MYjobs Presentation Django-based projectMYjobs Presentation Django-based project
MYjobs Presentation Django-based project
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
 
Cloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEECloud Data Center Network Construction - IEEE
Cloud Data Center Network Construction - IEEE
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
 

Meteor Angular

  • 1. Build Realtime Web and Mobile Apps With Angular and Meteor 22 October 2015 - Angular Meetup Oslo
  • 2. Do you know MEAN stack ?
  • 3. So, what is Meteor? Meteor is an ultra-simple environment for building modern websites Meteor is two things: A library of packages: pre-written, self-contained modules that you might need in your app A command-line tool called meteor
  • 4. Principles of Meteor Data on the Wire One Language Database Everywhere Latency Compensation Full Stack Reactivity Embrace the Ecosystem Simplicity Equals Productivity
  • 5. Structuring your application Free to play :) But few rules for file loading: • HTML template files are always loaded before everything else • Files beginning with main. are loaded last • Files inside any lib/ directory are loaded next • Files with deeper paths are loaded next • Files are then loaded in alphabetical order of the entire path
  • 7. Meteor makes writing distributed client code as simple as talking to a local database The client and server share the same database API Most Meteor apps use MongoDB But, they working on support on other DB as well: Meteor Livequery
  • 8. // declare collections // this code should be included in both the client and the server Parties = new Mongo.Collection("parties"); // server: populate collections with some initial documents Parties.insert({name: "Super Bowl Party"}); // server: publish the set of parties the logged-in user can see. Meteor.publish("parties", function () { return Parties.find({$or: [{"public": true}, {invited: this.userId}, {owner: this.userId}]}); }); // client: start a parties subscription Meteor.subscribe("parties"); // client: return array of Parties this client can read return Parties.find().fetch(); // synchronous! MongoDB
  • 9. Security // server: don't allow client to insert a party Parties.allow({ insert: function (userId, party) { return false; } }); // client: this will fail var party = { ... }; Parties.insert(party);
  • 10. Reactivity Meteor's implementation is a package called Tracker Tracker.autorun(function () { Meteor.subscribe("messages", Session.get("currentRoomId")); });
  • 11. Distributed Data Protocol Simple protocol for fetching structured data from a server, and receiving live updates when that data changes. DDP implementations Android AS3 (ActionScript3) C# Dart Go Haskell iOS Java JavaScript .NET Node.JS Objective C (iOS) PHP Python Qt / QML Ruby
  • 12. Authentication Meteor Accounts package Facebook, GitHub, Google, Meetup, Twitter, Weibo and more… $ meteor add accounts-password accounts-ui
  • 13. Blaze <div class="friendList"> <ul> {{#each friends}} <li class="{{#if selected}}selected{{/if}}"> {{firstName}} {{lastName}} </li> {{/each}} </ul> </div> Powerful library for creating live-updating user interfaces
  • 14. Tools and Services METEOR TOOL DEVELOPER ACCOUNTS ATMOSPHERE
  • 16. But Blaze is just one module that we can easily replace with another AngularJs
  • 17. Why Meteor? • Best or one of the best :) real time backend for AngularJS • Super easy, Real-time integration with the database • Full stack and open source • Great Cordova integration • Easy deployment
  • 18. Why use AngularJS? • MVC and MVVM structure on the client • Use existing applications • Ecosystem and community • Easy entrance to Meteor • Angular 2.0
  • 19. Don’t choose one solution Use both Blaze and AngularJS Use libraries, packages and solutions from both communities Give neutral perspective on the two frameworks
  • 20. So, what it gives you Real Time Data Sync and Store $meteor.collection(collection, autobind)
  • 21. User authentication List of helpers that allows you integrate your code with meteor accounts 1 $stateProvider 2 .state('home', { 3 url: '/', 4 templateUrl: 'client/views/home.ng.html', 5 controller: 'HomeController' 6 resolve: { 7 "currentUser": ["$meteor", function($meteor){ 8 return $meteor.requireUser(); 9 }] 10 } 11 });
  • 22. FullStack Angular applications with Angular-Server 1 // server/startup.js 2 angular.bootstrap(['todoMVC']);
  • 23. How to use it ? 1 // server/api/calculator.js 2 angular.module('myApp').service('Calculator', function() { 3 this.add = function(a, b) { 4 return a + b; 5 }; 6 }); 1 // server/api/apis.js 2 angular.module('myApp').config(function(ServerAPIProvider) { 3 ServerAPIProvider.register('Calculator'); 4 }); Register it
  • 24. Use it 1 // client/controllers/main.js 2 angular.module('myApp').controller('MainCtrl', function(Calculator) { 3 $scope.currentResult = 0; 4 5 $scope.add = function(value) { 6 Calculator.add($scope.currentResult, value).then(function(result) { 7 $scope.currentResult = result; 8 }); 9 }; 10 });
  • 25. A Clear Migration Path to Angular 2.0 Angular 2 Now Angular 2.0.0-alpha

Editor's Notes

  1. Principles of Meteor Data on the Wire. Meteor doesn't send HTML over the network. The server sends data and lets the client render it. One Language. Meteor lets you write both the client and the server parts of your application in JavaScript. Database Everywhere. You can use the same methods to access your database from the client or the server. Latency Compensation. On the client, Meteor prefetches data and simulates models to make it look like server method calls return instantly. Full Stack Reactivity. In Meteor, realtime is the default. All layers, from database to template, update themselves automatically when necessary. Embrace the Ecosystem. Meteor is open source and integrates with existing open source tools and frameworks. Simplicity Equals Productivity. The best way to make something seem simple is to have it actually be simple. Meteor's main functionality has clean, classically beautiful APIs.
  2. Meteor Livequery is a family of live database connectors These connectors let you perform "live queries" against your favorite database: The need for Livequery In any modern app — any app without a refresh button, as RethinkDB and Firebase do similar How it works How Livequery detects changes database triggers replication log to poll the database for changes In Meteor, the client and server share the same database API. The same exact application code — like validators and computed properties — can often run in both places. But while code running on the server has direct access to the database, code running on the client does not. This distinction is the basis for Meteor's data security model.
  3. When the client changes one or more documents, it sends a message to the server requesting the change. The server checks the proposed change against a set of allow/deny rules you write as JavaScript functions. The server only accepts the change if all the rules pass. Meteor has a cute trick, though. When a client issues a write to the server, it also updates its local cache immediately, without waiting for the server's response. This means the screen will redraw right away.
  4. This example (taken from a chat room client) sets up a data subscription based on the session variable currentRoomId. If the value of Session.get("currentRoomId") changes for any reason, the function will be automatically re-run, setting up a new subscription that replaces the old one.
  5. Meteor includes Meteor Accounts, a state-of-the-art authentication system. It features secure password login using the bcrypt algorithm, and integration with external services including Facebook, GitHub, Google, Meetup, Twitter, and Weibo.
  6. METEOR TOOL The Meteor tool is an integrated command-line interface for building, packaging and deploying apps with Meteor. mobile, web, Can contain plugins that extend Isobuild DEVELOPER ACCOUNTS Meteor developer accounts provide a single username to identify you across the Meteor community for publishing packages, deploying apps and logging into services. ATMOSPHERE Atmosphere provides a user interface over the Meteor package server enabling you to discover and use community packages in your app.
  7. The Meteor Galaxy service is the best way to operate and scale 'Connected Client' apps built with Meteor. Galaxy provides a great experience to simplify DevOps for apps.
  8. Sync data in realtime across your own server, DB and clients instantly.
  9. Now we need to tell angular-meteor to expose this service as an API to our client. We do that using the ServerAPIProvider. Using this provider we register our service as an API
  10. An important note is that if the service that was registered as an API is in common code (also defined on the client) the call to the service function will call the client function and the server function both using the client function as a stub. That is the same expected result when using a Meteor.method.
  11. Use Angular 2.0 syntax with ES6 on top of your Angular 1.x application. Angular 2 Now is a library by @pbastowski that is targeted at people who: - use Angular 1.x and think about migrating to Angular 2 when it finally arrives. like Angular 2 features and want to start using them on top of Angular 1.x right now. Angular 2.0.0-alpha An angular2-meteor package with all the dependencies (TypeScript, System.js, etc...) so you can start writing Angular 2.0 code right away. written by - @barbatus, @netanelgilad and @ShMcK. http://angular-meteor.com/angular2