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'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 (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

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

Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
gajnagarg
 
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
ydyuyu
 
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
ayvbos
 
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
ayvbos
 
75539-Cyber Security Challenges PPT.pptx
75539-Cyber Security Challenges PPT.pptx75539-Cyber Security Challenges PPT.pptx
75539-Cyber Security Challenges PPT.pptx
Asmae Rabhi
 
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdfpdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
JOHNBEBONYAP1
 
一比一原版(Offer)康考迪亚大学毕业证学位证靠谱定制
一比一原版(Offer)康考迪亚大学毕业证学位证靠谱定制一比一原版(Offer)康考迪亚大学毕业证学位证靠谱定制
一比一原版(Offer)康考迪亚大学毕业证学位证靠谱定制
pxcywzqs
 

Recently uploaded (20)

Microsoft Azure Arc Customer Deck Microsoft
Microsoft Azure Arc Customer Deck MicrosoftMicrosoft Azure Arc Customer Deck Microsoft
Microsoft Azure Arc Customer Deck Microsoft
 
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
20240509 QFM015 Engineering Leadership Reading List April 2024.pdf
 
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
Top profile Call Girls In Dindigul [ 7014168258 ] Call Me For Genuine Models ...
 
20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf20240508 QFM014 Elixir Reading List April 2024.pdf
20240508 QFM014 Elixir Reading List April 2024.pdf
 
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac RoomVip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
Vip Firozabad Phone 8250092165 Escorts Service At 6k To 30k Along With Ac Room
 
Real Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirtReal Men Wear Diapers T Shirts sweatshirt
Real Men Wear Diapers T Shirts sweatshirt
 
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrStory Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
Story Board.pptxrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr
 
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
原版制作美国爱荷华大学毕业证(iowa毕业证书)学位证网上存档可查
 
Trump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts SweatshirtTrump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts Sweatshirt
 
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
best call girls in Hyderabad Finest Escorts Service 📞 9352988975 📞 Available ...
 
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency""Boost Your Digital Presence: Partner with a Leading SEO Agency"
"Boost Your Digital Presence: Partner with a Leading SEO Agency"
 
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
 
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
一比一原版(Curtin毕业证书)科廷大学毕业证原件一模一样
 
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
一比一原版(Flinders毕业证书)弗林德斯大学毕业证原件一模一样
 
75539-Cyber Security Challenges PPT.pptx
75539-Cyber Security Challenges PPT.pptx75539-Cyber Security Challenges PPT.pptx
75539-Cyber Security Challenges PPT.pptx
 
APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53APNIC Updates presented by Paul Wilson at ARIN 53
APNIC Updates presented by Paul Wilson at ARIN 53
 
Best SEO Services Company in Dallas | Best SEO Agency Dallas
Best SEO Services Company in Dallas | Best SEO Agency DallasBest SEO Services Company in Dallas | Best SEO Agency Dallas
Best SEO Services Company in Dallas | Best SEO Agency Dallas
 
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
20240510 QFM016 Irresponsible AI Reading List April 2024.pdf
 
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdfpdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
pdfcoffee.com_business-ethics-q3m7-pdf-free.pdf
 
一比一原版(Offer)康考迪亚大学毕业证学位证靠谱定制
一比一原版(Offer)康考迪亚大学毕业证学位证靠谱定制一比一原版(Offer)康考迪亚大学毕业证学位证靠谱定制
一比一原版(Offer)康考迪亚大学毕业证学位证靠谱定制
 

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