CraftCamp for Students - Introduction to Meteor.js
0 likes863 views
This document summarizes a workshop on the Meteor platform for building web and mobile apps. Meteor allows developing both client and server code in JavaScript and sharing code between them. Apps are built using MongoDB, WebSockets for live updates, and Node.js on the server. Meteor supports mobile development for Android and iOS using Cordova. Isomorphic packages allow accessing native device APIs like GPS. The structure of a Meteor app includes models, client-side templates and logic, server-side code, and public/private assets. A demo chat application is shown to illustrate a basic Meteor app. Questions are taken at the end.
CraftCamp for Students - Introduction to Meteor.js
- 3. Agenda What is Meteor Why Meteor Structure of a Meteor application Example: Chat application Q & A
- 4. What is Meteor "Meteor is a complete open source platform for building web and mobile apps in pure JavaScript."
- 5. Meteor platform Full stack (both server- and client side) MongoDB WebSockets: Live communication between server and client Code is shared between client and server Node.js
- 6. Building web & mobile apps Meteor allows you to use the same code on server- and clientside The default platform is web, but other platforms can be added: Meteor packages are isomorphic (they might run on the web, on a mobile device or on the server) meteoradd-platformandroid meteoradd-platformios
- 7. Building web & mobile apps Platforms Meteor uses Cordova to support Android and iOS To make an application available for Android devices, you simply use: If you don't have the Android SDK installed, you can install it with the Meteor CLI as well: To run it on an actual device, you use: meteoradd-platformandroid meteorrunandroid meteorinstall-sdkandroid meteorrunandroid-device
- 8. Building web & mobile apps Isomorphic packages Native APIs can be accessed (GPS, camera, ...) Meteor wraps them in isomorphic packages (Camera, Geolocation, ...) Running the following code will work both on the web and on mobile devices: On the web it will use the On mobile devices it will use the native GPS using Cordova Geolocation.currentLocation() HTML 5 Geolocation API
- 9. Pure JavaScript Meteor is a full stack JavaScript framework Back-end = Node.js Front-end = Webbrowser Code can be shared between both the back-end and front-end (for example models, utilities, ...)
- 10. Why Meteor Characteristics Running on both mobile and web Live updates (data changes will be visible immediately on all clients) Hot deployment (both local and on the cloud) Ultra responsive Easy authentication with accounts-packages (+ easy integration with Twitter/Facebook OAuth)
- 11. Why Meteor The good... the bad and the ugly DO use it when live updates are important DO use it for new applications DO use it for mobile applications DON'T use it with existing data (unless it can be easily ported to MongoDB)
- 12. Structure of a Meteor application Model (MongoDB collection) Client (MiniMongo, templates) Server (Node.js) Public (CSS, images) Private (configuration)
- 13. Structure of a Meteor application Model Using a model in Meteor is as simple as: To insert/remove/update data you can use: Messages=newMongo.Collection('messages'); Messages.insert({ message:"Mymessage", time:newDate() });
- 14. Structure of a Meteor application Client The client side logic primarily contains templates, event handling and plain JavaScript To actually change data, you use MiniMongo (it emulates a MongoDB database on the client) Templates are written using Spacebars (template engine): jQuery is allowed within templates {{#ifcurrentUser}} <h1>Welcomeuser</h1> {{/if}}
- 15. Demo time Pray to the demo gods
- 16. Q & A You have the questions We (might) have the answers More feedback: or#craftcamps @g00glen00b
- 17. References Slides: HTML5 slides: Source code: Demo: Getting started: Craftworkz: http://www.slideshare.net/craftworkz http://craftworkz.github.io/ucll-workshop- meteor/slides/ https://github.com/craftworkz/ucll-workshop- meteor http://ucll-demo-meteor.meteor.com/ https://www.meteor.com/ http://craftworkz.co