Talk about integration Meteor with AngularJS

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

6. Meteor framework

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

15. Galaxy service

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

26. Time for demo!