Intro slides to Angular Meteor Demo

1. http://angular-meteor.com/ (Photo Credit)
Build a Recipe Maker with Angular and MeteorJS
TriAngular.js Meetup November 5th, 2015
Jean-Marcel Belmont

2. 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.
● http://docs.meteor.com/#/basic/sevenprinciples

3. Visual Presentation of 7 Core Meteor Principles
Image from Rick Wehrle on slide 4
http://www.slideshare.net/wehrlock/20150309-seven-core-principles-of-meteor-45620129

4. 5 Core Meteor Projects
1. Blaze
a. Reactive UI Library
i. Rendering Engine
b. Spacebars Template Library which is equivalent to Handlebars
2. DDP
a. Websocket-based data protocol
b. DDP is like "REST for websockets". Like REST, it is a simple, pragmatic approach to providing an
API. But it is websocket-based, unlike REST, allowing it to be used to deliver live updates as data
changes. Implementation of DDP is simple (it's just a few JSON messages over a websocket) and the
spec fits on a couple of pages.
3. Livequery
a. Live Database connectors
b. Meteor Livequery is a family of live database connectors. These connectors let you perform "live
queries" against your favorite database: queries that not only return the result of the query at the
time it is made, but that then go on to return a stream of create, update, and delete messages that
inform you of any changes to the result of the query as time passes.

5. 5 Core Meteor Projects (continued)
4. Full Stack Database Drivers
a. Use the same database API on client and server
i. These "full-stack" database drivers let you use the same database API to seamlessly access
your data wherever you are in your system, whether on the client or the server
5. IsoBuild
b. Unified build system for browser, server, and mobile
i. Like make, gcc, and ld in the Unix world, or the command-line Visual Studio tools in the
Windows world, Meteor Isobuild is a complete toolchain for building an app from its source
code into a set of runnable programs.
Read more documentation from https://www.meteor.com/projects

6. Why Add AngularJS?
Angular extends functionality that is provided by Blaze or can be used to completely replace Blaze.
Spacebars Angular

7. Angular meteor file extensions
● ng.html files
○ Use the ng.html file extension so that Blaze - Meteor's templating system - won't compile and
override Angular 1 expressions.
● ng.js files
○ ng.js files automatically use ng-annotate and are safely minified.

8. Common Meteor API methods
if (Meteor.isClient) { if (Meteor.isServer) {
// Any code here runs on client // Any code here runs on server
} }
Meteor.startup(function() {
// Runs code when a client or server starts
});

9. Angular Meteor Folder Structure and Load Order
● The JavaScript and CSS files in an application are loaded according to these rules:
● Server
○ Meteor gathers any files under the private subdirectory and makes the contents of these files
available to server code via the Assets API. The private subdirectory is the place for any files that
should be accessible to server code but not served to the client, like private data files.
● Client
○ Files inside the client folder will run only on the client side.
○ There are more assets to consider on the client side. Meteor gathers all JavaScript files in your tree,
with the exception of the server, public, and private subdirectories, for the client. It minifies this
bundle and serves it to each new client. You're free to use a single JavaScript file for your entire
application, or create a nested tree of separate files, or anything in between.
● Public
○ Lastly, the Meteor server will serve any files under the public directory. This is the place for images,

10. (cont) Angular Meteor Folder Structure and Load Order
● Files in subdirectories are loaded before files in parent directories, so that files in the deepest subdirectory
are loaded first, and files in the root directory are loaded last.
● Within a directory, files are loaded in alphabetical order by filename.
● After sorting as described above, all files under directories named lib are moved before everything else
(preserving their order).
● Finally, all files that match main.* are moved after everything else (preserving their order).
● Angular 1 folder structure
● There are many ways to organize and structure an Angular 1 app.
● The two main approaches are:
○ Sorting by file type (controllers, views, etc..)
○ Sorting based on functionality (users, recipes, products, etc..)
■ This is the folder structure that is recommended and that I used for my application.

11. Meteor Command Line Tool
● meteor help
○ Get help on meteor command line usage. Running meteor help by itself will list the common
meteor commands. Running meteor help <command> will print detailed help about meteor
<command>.
● meteor create <name>
○ Make a subdirectory called <name> and create a new Meteor app there.
● meteor run
○ Serve the current app at http://localhost:3000 using Meteor's local development server.
● meteor debug
○ Run the project with Node Inspector attached, so that you can step through your server code line
by line. See meteor debug in the full docs for more information.
● meteor deploy <site>
○ Bundle your app and deploy it to <site>. Meteor provides free hosting if you deploy to <your app>.
meteor.com as long as <your app> is a name that has not been claimed by someone else.

12. (continued) Meteor Command Line Tool
● meteor update
○ Update your Meteor installation to the latest released version and then (if meteor update was run from an app
directory) update the packages used by the current app to the latest versions that are compatible with all other
packages used by the app.
● meteor add
○ Add a package (or multiple packages) to your Meteor project. To query for available packages, use the meteor
search command.
● meteor remove
○ Remove a package previously added to your Meteor project. For a list of the packages that your application is
currently using, use the meteor list command.
● meteor mongo
○ Opens a MongoDB shell for viewing and/or manipulating collections stored in the database. Note that you must
already be running a server for the current app (in another terminal window) in order for meteor mongo to connect
to the app's database.
● meteor reset
○ Reset the current project to a fresh state. Removes all local data.

13. Demo Time