Build a Recipe Maker with Angular-Meteor

Intro slides to Angular Meteor Demo

Transcript

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