SlideShare a Scribd company logo
1 of 39
Download to read offline
What’s that?
Full stack pure JS framework for
building awesome apps in no time.
What’s inside?
- MongoDB
- Node JS
- lots of packages
- ...
Why is Meteor awesome?
- Installation as simple as it can be
- Build reactive(???) apps in no time
- Build mobile(???) apps in no time
- Deployment using 1 command
First things first
Installing meteor takes a few seconds:
curl https://install.meteor.com/ | sh
First things first
Creating new app also takes couple of
seconds
meteor create app-name
What’s next?
- Adding packages https://atmospherejs.com/
- Building your application
- Deploying to server
- Enjoying the app created in less than a day
Packages
- Adding packages was made real simple just find your
desired package and type meteor add <package>
- There are some useful packaged that are required
almost in every app: accounts-base, jquery, less
- meteor remove to remove package
- meteor list to list all added packages
Meteor app structure
Basically it is up to you, but meteor has some
standards anyways. 4 main entities:
- lib
- client
- server
- public
Meteor app structure
- For code accessed both from server and
client side these can be used
Meteor.isClient and Meteor.isServer
Meteor templates
- Uses Blaze template
engine
- Basically looks like this :
- Forget about random
logic in templates.
- Everything happens with
helpers
Meteor template helpers
- Helpers help to store logic outside of templates making
them super readable
Helper
Template with name ‘user_view’
Meteor template helpers
So basically this won’t work
but
+
will work
Isn’t it a bit complicated?
Meteor template events
- Events are assigned to elements only in
particular template.
- Structure similar to helpers
Meteor collections
- Collections are defined really simple
MyCollection = new Meteor.Collection('collection-name-in-mongo')
- After that MyCollection.[insert|update|remove] methods
are available both from client and server side. They can
basically be fired by any user from console in browser
(WHAT?)
Meteor collections
“OMG Meteor must be so insecure if it lets
anyone to fire insert events into database
#notGonnaUseIt”
Meteor collections
- “autopublish” and “insecure” - why these two
packages are needed?
- Both should be disabled in production
- Publications and Subscriptions should be
used.
Publications and Subscriptions
Simple : publication describes what data user
will be allowed to read from Mongo collection,
and subscription subscribes to that data.
Publications and Subscriptions
Calling Meteor methods securely
Client side
Server side
Meteor as MVC framework?
- This is actually possible to have javascript
MVC framework.
- meteor add iron:router
- How does it work?
Meteor as MVC framework?
Set global configs
Define route
Check out this great tutorial. It has basically everything you need to know in it:
http://manuel-schoebel.com/blog/iron-router-tutorial
How to use iron router controller?
Actions before
Waiting for data
from Mongo
Data returned to
view (defined in
routes.js)
How to use iron router controller?
ID passed from controller as data

Recap
So what do we have now?
- can create new app
- can create app structure
- can create some views
- can create collections
- can create routes to views
- Can we create a simple app?
Let’s create simple chat app
1. meteor create chat-app
2. Let’s add necessary
packages
a. meteor add accounts-facebook
b. meteor add iron:router
3. Lets think about this simple
app structure
Let’s create simple chat app
Let’s start with collections
Let’s create simple chat app
Let’s add secure chat
message add method.
As we can see non-
logged in user won’t able
to post messages.
Let’s create simple chat app
Let’s start with collections
Here we have only subscription and
publication. Usually they’re kept under
publications on server.
Let’s create simple chat app
Let’s define a route to our chat view (which will
be created) (client/routes.js) | (client/controllers/ChatController.js)
Let’s create simple chat app
We’ll need to create real simple template for
our app (client/templates/chat/chat.html)
Let’s create simple chat app
Binding events
/ helpers to
elements
(client/templates/chat/ch
at.js)
Let’s create simple chat app
And that’s basically it.
Apply some designs
and enjoy your real
time reactive chat app.
Deploy to server
Two approaches known to me
- use <appname>.meteor.com (if it is still free)
- use your own server with MongoDB/node/..
- use Meteor-up (mup package)
Deploy to server
The one I used is mup. Install it with
npm install -g mup
After install just “mup init” and change config in
mup.json to match your setup. Full docs https:
//github.com/arunoda/meteor-up
Is there anything else I can do?
There’s one more cool feature in meteor that
should be mentioned. It can wrap your web
application (such as this simple chat) and
create a mobile APP just with couple of
commands.
Why do I need that?
Q: Isn’t it better to write a native application?
A: Well, probably. But if you are short on
resources or just lazy you can use this option,
basically it is the same as opening your web
page in browser.
And thats it?
Q: Simple wrapper for full screen browser?
A: Yes and no. Meteor has access to almost all
phone’s functions through Cordova plugins
from Apache. http://plugins.cordova.io/#/
To wrap up
- fast
- easy development/prototyping
- pure javascript
- full stack
- reactive
- has lots of packages
- easily portable to mobile platforms

More Related Content

What's hot

What is Spring Boot and Why Spring Boot ?
What is Spring Boot and Why Spring Boot ?What is Spring Boot and Why Spring Boot ?
What is Spring Boot and Why Spring Boot ?narendrachinnu
 
Create a meteor chat app in 30 minutes
Create a meteor chat app in 30 minutesCreate a meteor chat app in 30 minutes
Create a meteor chat app in 30 minutesDesignveloper
 
Tomcat Maven Plugin
Tomcat Maven PluginTomcat Maven Plugin
Tomcat Maven PluginOlivier Lamy
 
Spring Boot & Actuators
Spring Boot & ActuatorsSpring Boot & Actuators
Spring Boot & ActuatorsVMware Tanzu
 
Get started with meteor | designveloper software agency meteor prime partner
Get started with meteor | designveloper software agency   meteor prime partnerGet started with meteor | designveloper software agency   meteor prime partner
Get started with meteor | designveloper software agency meteor prime partnerDesignveloper
 
What's new in Meteor 1.3?
What's new in Meteor 1.3?What's new in Meteor 1.3?
What's new in Meteor 1.3?Rick Wehrle
 
Meteor presentation
Meteor presentationMeteor presentation
Meteor presentationNicu Gudumac
 
How to customize Spring Boot?
How to customize Spring Boot?How to customize Spring Boot?
How to customize Spring Boot?GilWon Oh
 
.NET Conf 2018: Build Great Libraries using .NET Standard
.NET Conf 2018: Build Great Libraries using .NET Standard.NET Conf 2018: Build Great Libraries using .NET Standard
.NET Conf 2018: Build Great Libraries using .NET StandardImmo Landwerth
 
PuppetCamp Verona 2013 - Razor, Puppet & VMware
PuppetCamp Verona 2013 - Razor, Puppet & VMwarePuppetCamp Verona 2013 - Razor, Puppet & VMware
PuppetCamp Verona 2013 - Razor, Puppet & VMwaregguglie
 
Spring boot introduction
Spring boot introductionSpring boot introduction
Spring boot introductionRasheed Waraich
 

What's hot (20)

What is Spring Boot and Why Spring Boot ?
What is Spring Boot and Why Spring Boot ?What is Spring Boot and Why Spring Boot ?
What is Spring Boot and Why Spring Boot ?
 
Create a meteor chat app in 30 minutes
Create a meteor chat app in 30 minutesCreate a meteor chat app in 30 minutes
Create a meteor chat app in 30 minutes
 
Tomcat Maven Plugin
Tomcat Maven PluginTomcat Maven Plugin
Tomcat Maven Plugin
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
Spring Boot Tutorial
Spring Boot TutorialSpring Boot Tutorial
Spring Boot Tutorial
 
Meteor
MeteorMeteor
Meteor
 
Maven: Mule esb plugin
Maven: Mule esb pluginMaven: Mule esb plugin
Maven: Mule esb plugin
 
SWT Lab 2
SWT Lab 2SWT Lab 2
SWT Lab 2
 
SWT Lab 1
SWT Lab 1SWT Lab 1
SWT Lab 1
 
Spring Boot & Actuators
Spring Boot & ActuatorsSpring Boot & Actuators
Spring Boot & Actuators
 
Get started with meteor | designveloper software agency meteor prime partner
Get started with meteor | designveloper software agency   meteor prime partnerGet started with meteor | designveloper software agency   meteor prime partner
Get started with meteor | designveloper software agency meteor prime partner
 
What's new in Meteor 1.3?
What's new in Meteor 1.3?What's new in Meteor 1.3?
What's new in Meteor 1.3?
 
Meteor presentation
Meteor presentationMeteor presentation
Meteor presentation
 
How to customize Spring Boot?
How to customize Spring Boot?How to customize Spring Boot?
How to customize Spring Boot?
 
Angular Universal
Angular UniversalAngular Universal
Angular Universal
 
.NET Conf 2018: Build Great Libraries using .NET Standard
.NET Conf 2018: Build Great Libraries using .NET Standard.NET Conf 2018: Build Great Libraries using .NET Standard
.NET Conf 2018: Build Great Libraries using .NET Standard
 
PuppetCamp Verona 2013 - Razor, Puppet & VMware
PuppetCamp Verona 2013 - Razor, Puppet & VMwarePuppetCamp Verona 2013 - Razor, Puppet & VMware
PuppetCamp Verona 2013 - Razor, Puppet & VMware
 
Atom IDE
Atom IDEAtom IDE
Atom IDE
 
Spring boot introduction
Spring boot introductionSpring boot introduction
Spring boot introduction
 

Viewers also liked

Searching library's catalog
Searching library's catalogSearching library's catalog
Searching library's catalogvfloreswcu
 
How to renew an item
How to renew an itemHow to renew an item
How to renew an itemvfloreswcu
 
Sejarah Kalkulator
Sejarah KalkulatorSejarah Kalkulator
Sejarah KalkulatorJakurrid
 
Placing a hold
Placing a holdPlacing a hold
Placing a holdvfloreswcu
 
Andi Work Sample
Andi Work SampleAndi Work Sample
Andi Work SampleAndrea Exo
 
Ενδομυϊκές Ενέσεις (Intramuscular Injections)
Ενδομυϊκές Ενέσεις (Intramuscular Injections)Ενδομυϊκές Ενέσεις (Intramuscular Injections)
Ενδομυϊκές Ενέσεις (Intramuscular Injections)NataliaNosileutria
 

Viewers also liked (6)

Searching library's catalog
Searching library's catalogSearching library's catalog
Searching library's catalog
 
How to renew an item
How to renew an itemHow to renew an item
How to renew an item
 
Sejarah Kalkulator
Sejarah KalkulatorSejarah Kalkulator
Sejarah Kalkulator
 
Placing a hold
Placing a holdPlacing a hold
Placing a hold
 
Andi Work Sample
Andi Work SampleAndi Work Sample
Andi Work Sample
 
Ενδομυϊκές Ενέσεις (Intramuscular Injections)
Ενδομυϊκές Ενέσεις (Intramuscular Injections)Ενδομυϊκές Ενέσεις (Intramuscular Injections)
Ενδομυϊκές Ενέσεις (Intramuscular Injections)
 

Similar to Meteor

Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteorSapna Upreti
 
Reactive Application Using METEOR
Reactive Application Using METEORReactive Application Using METEOR
Reactive Application Using METEORNodeXperts
 
1 app 2 developers 3 servers
1 app 2 developers 3 servers1 app 2 developers 3 servers
1 app 2 developers 3 serversMark Myers
 
Deploy meteor in production
Deploy meteor in productionDeploy meteor in production
Deploy meteor in productionMiro Radenovic
 
Meteor.js Workshop by Dopravo
Meteor.js Workshop by DopravoMeteor.js Workshop by Dopravo
Meteor.js Workshop by DopravoArabNet ME
 
Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Lou Sacco
 
Django simplified : by weever mbakaya
Django simplified : by weever mbakayaDjango simplified : by weever mbakaya
Django simplified : by weever mbakayaMbakaya Kwatukha
 
CraftCamp for Students - Introduction to Meteor.js
CraftCamp for Students - Introduction to Meteor.jsCraftCamp for Students - Introduction to Meteor.js
CraftCamp for Students - Introduction to Meteor.jscraftworkz
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshareSaleemMalik52
 
Atmosphere Conference 2015: Do you think you're doing microservices?
Atmosphere Conference 2015: Do you think you're doing microservices?Atmosphere Conference 2015: Do you think you're doing microservices?
Atmosphere Conference 2015: Do you think you're doing microservices?PROIDEA
 
Vue micro frontend implementation patterns
Vue micro frontend implementation patternsVue micro frontend implementation patterns
Vue micro frontend implementation patternsAlbert Brand
 
Scale your Magento app with Elastic Beanstalk
Scale your Magento app with Elastic BeanstalkScale your Magento app with Elastic Beanstalk
Scale your Magento app with Elastic BeanstalkCorley S.r.l.
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...Fwdays
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slidesDavid Barreto
 
Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular applicationSuresh Patidar
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekDr. Felix Raab
 

Similar to Meteor (20)

Reactive application using meteor
Reactive application using meteorReactive application using meteor
Reactive application using meteor
 
Reactive Application Using METEOR
Reactive Application Using METEORReactive Application Using METEOR
Reactive Application Using METEOR
 
NodeJS @ ACS
NodeJS @ ACSNodeJS @ ACS
NodeJS @ ACS
 
1 app 2 developers 3 servers
1 app 2 developers 3 servers1 app 2 developers 3 servers
1 app 2 developers 3 servers
 
Deploy meteor in production
Deploy meteor in productionDeploy meteor in production
Deploy meteor in production
 
Meteor.js Workshop by Dopravo
Meteor.js Workshop by DopravoMeteor.js Workshop by Dopravo
Meteor.js Workshop by Dopravo
 
Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014Meteor Meet-up San Diego December 2014
Meteor Meet-up San Diego December 2014
 
Django simplified : by weever mbakaya
Django simplified : by weever mbakayaDjango simplified : by weever mbakaya
Django simplified : by weever mbakaya
 
CraftCamp for Students - Introduction to Meteor.js
CraftCamp for Students - Introduction to Meteor.jsCraftCamp for Students - Introduction to Meteor.js
CraftCamp for Students - Introduction to Meteor.js
 
Meteor
MeteorMeteor
Meteor
 
Angular kickstart slideshare
Angular kickstart   slideshareAngular kickstart   slideshare
Angular kickstart slideshare
 
Atmosphere Conference 2015: Do you think you're doing microservices?
Atmosphere Conference 2015: Do you think you're doing microservices?Atmosphere Conference 2015: Do you think you're doing microservices?
Atmosphere Conference 2015: Do you think you're doing microservices?
 
Vue micro frontend implementation patterns
Vue micro frontend implementation patternsVue micro frontend implementation patterns
Vue micro frontend implementation patterns
 
Meteor Introduction - Ashish
Meteor Introduction - AshishMeteor Introduction - Ashish
Meteor Introduction - Ashish
 
Scale your Magento app with Elastic Beanstalk
Scale your Magento app with Elastic BeanstalkScale your Magento app with Elastic Beanstalk
Scale your Magento app with Elastic Beanstalk
 
Meteor
MeteorMeteor
Meteor
 
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai..."Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
"Micro-frontends: Scalable and Modular Frontend in Parimatch Tech", Kyrylo Ai...
 
Angular performance slides
Angular performance slidesAngular performance slides
Angular performance slides
 
Web worker in your angular application
Web worker in your angular applicationWeb worker in your angular application
Web worker in your angular application
 
Building a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one weekBuilding a full-stack app with Golang and Google Cloud Platform in one week
Building a full-stack app with Golang and Google Cloud Platform in one week
 

Recently uploaded

『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书rnrncn29
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predieusebiomeyer
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书rnrncn29
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxMario
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxNIMMANAGANTI RAMAKRISHNA
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxAndrieCagasanAkio
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxmibuzondetrabajo
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书zdzoqco
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxDyna Gilbert
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa494f574xmv
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119APNIC
 

Recently uploaded (11)

『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
『澳洲文凭』买拉筹伯大学毕业证书成绩单办理澳洲LTU文凭学位证书
 
SCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is prediSCM Symposium PPT Format Customer loyalty is predi
SCM Symposium PPT Format Customer loyalty is predi
 
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
『澳洲文凭』买詹姆士库克大学毕业证书成绩单办理澳洲JCU文凭学位证书
 
Company Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptxCompany Snapshot Theme for Business by Slidesgo.pptx
Company Snapshot Theme for Business by Slidesgo.pptx
 
ETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptxETHICAL HACKING dddddddddddddddfnandni.pptx
ETHICAL HACKING dddddddddddddddfnandni.pptx
 
TRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptxTRENDS Enabling and inhibiting dimensions.pptx
TRENDS Enabling and inhibiting dimensions.pptx
 
Unidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptxUnidad 4 – Redes de ordenadores (en inglés).pptx
Unidad 4 – Redes de ordenadores (en inglés).pptx
 
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
办理多伦多大学毕业证成绩单|购买加拿大UTSG文凭证书
 
Top 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptxTop 10 Interactive Website Design Trends in 2024.pptx
Top 10 Interactive Website Design Trends in 2024.pptx
 
Film cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasaFilm cover research (1).pptxsdasdasdasdasdasa
Film cover research (1).pptxsdasdasdasdasdasa
 
IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119IP addressing and IPv6, presented by Paul Wilson at IETF 119
IP addressing and IPv6, presented by Paul Wilson at IETF 119
 

Meteor

  • 1.
  • 2. What’s that? Full stack pure JS framework for building awesome apps in no time.
  • 3. What’s inside? - MongoDB - Node JS - lots of packages - ...
  • 4. Why is Meteor awesome? - Installation as simple as it can be - Build reactive(???) apps in no time - Build mobile(???) apps in no time - Deployment using 1 command
  • 5. First things first Installing meteor takes a few seconds: curl https://install.meteor.com/ | sh
  • 6. First things first Creating new app also takes couple of seconds meteor create app-name
  • 7. What’s next? - Adding packages https://atmospherejs.com/ - Building your application - Deploying to server - Enjoying the app created in less than a day
  • 8. Packages - Adding packages was made real simple just find your desired package and type meteor add <package> - There are some useful packaged that are required almost in every app: accounts-base, jquery, less - meteor remove to remove package - meteor list to list all added packages
  • 9. Meteor app structure Basically it is up to you, but meteor has some standards anyways. 4 main entities: - lib - client - server - public
  • 10. Meteor app structure - For code accessed both from server and client side these can be used Meteor.isClient and Meteor.isServer
  • 11. Meteor templates - Uses Blaze template engine - Basically looks like this : - Forget about random logic in templates. - Everything happens with helpers
  • 12. Meteor template helpers - Helpers help to store logic outside of templates making them super readable Helper Template with name ‘user_view’
  • 13. Meteor template helpers So basically this won’t work but + will work Isn’t it a bit complicated?
  • 14. Meteor template events - Events are assigned to elements only in particular template. - Structure similar to helpers
  • 15. Meteor collections - Collections are defined really simple MyCollection = new Meteor.Collection('collection-name-in-mongo') - After that MyCollection.[insert|update|remove] methods are available both from client and server side. They can basically be fired by any user from console in browser (WHAT?)
  • 16. Meteor collections “OMG Meteor must be so insecure if it lets anyone to fire insert events into database #notGonnaUseIt”
  • 17. Meteor collections - “autopublish” and “insecure” - why these two packages are needed? - Both should be disabled in production - Publications and Subscriptions should be used.
  • 18. Publications and Subscriptions Simple : publication describes what data user will be allowed to read from Mongo collection, and subscription subscribes to that data.
  • 20. Calling Meteor methods securely Client side Server side
  • 21. Meteor as MVC framework? - This is actually possible to have javascript MVC framework. - meteor add iron:router - How does it work?
  • 22. Meteor as MVC framework? Set global configs Define route Check out this great tutorial. It has basically everything you need to know in it: http://manuel-schoebel.com/blog/iron-router-tutorial
  • 23. How to use iron router controller? Actions before Waiting for data from Mongo Data returned to view (defined in routes.js)
  • 24. How to use iron router controller? ID passed from controller as data 
  • 25. Recap So what do we have now? - can create new app - can create app structure - can create some views - can create collections - can create routes to views - Can we create a simple app?
  • 26. Let’s create simple chat app 1. meteor create chat-app 2. Let’s add necessary packages a. meteor add accounts-facebook b. meteor add iron:router 3. Lets think about this simple app structure
  • 27. Let’s create simple chat app Let’s start with collections
  • 28. Let’s create simple chat app Let’s add secure chat message add method. As we can see non- logged in user won’t able to post messages.
  • 29. Let’s create simple chat app Let’s start with collections Here we have only subscription and publication. Usually they’re kept under publications on server.
  • 30. Let’s create simple chat app Let’s define a route to our chat view (which will be created) (client/routes.js) | (client/controllers/ChatController.js)
  • 31. Let’s create simple chat app We’ll need to create real simple template for our app (client/templates/chat/chat.html)
  • 32. Let’s create simple chat app Binding events / helpers to elements (client/templates/chat/ch at.js)
  • 33. Let’s create simple chat app And that’s basically it. Apply some designs and enjoy your real time reactive chat app.
  • 34. Deploy to server Two approaches known to me - use <appname>.meteor.com (if it is still free) - use your own server with MongoDB/node/.. - use Meteor-up (mup package)
  • 35. Deploy to server The one I used is mup. Install it with npm install -g mup After install just “mup init” and change config in mup.json to match your setup. Full docs https: //github.com/arunoda/meteor-up
  • 36. Is there anything else I can do? There’s one more cool feature in meteor that should be mentioned. It can wrap your web application (such as this simple chat) and create a mobile APP just with couple of commands.
  • 37. Why do I need that? Q: Isn’t it better to write a native application? A: Well, probably. But if you are short on resources or just lazy you can use this option, basically it is the same as opening your web page in browser.
  • 38. And thats it? Q: Simple wrapper for full screen browser? A: Yes and no. Meteor has access to almost all phone’s functions through Cordova plugins from Apache. http://plugins.cordova.io/#/
  • 39. To wrap up - fast - easy development/prototyping - pure javascript - full stack - reactive - has lots of packages - easily portable to mobile platforms