Presentation on MeteorJS made at DAIICT

1. METEOR JS

2. WHAT IS METEOR?
• Full Stack JavaScript based framework built on NodeJS to develop mobile/web
applications
• One Language for both Frontend and Backend

3. FIRST METEOR APP
$: meteor create <photo-blog>

4. LET’S SEE THE MAGIC HAPPEN
$: cd <photo-blog>
$: meteor // runs the app

5. DID THIS HAPPEN AT <HTTP://LOCALHOST:3000>

6. METEOR FOLDER STRUCTURE
- client
- main.html
- main.js
- main.css
- server
- main.js
- imports
- public
- package.json
- .meteor

7. LET’S INSTALL REACT
• Here we are installing “react” and “react-dom” to our project.
• What is NPM?
• What does “–save” do? Check package.json file
$: meteor npm install --save react react-dom

8. WHAT IS REACTJS?
• React is JavaScript based frontend framework developed at Facebook
• React is developed based on the philosophy of breaking down the app into
“Components”
• React is a little strict with HTML Tags and few other things
• No <img>, but <img />. React needs closing tags
• No inline comments in HTML
We are not going to dive deeper into React. We will learn enough to develop a meteor app.

9. LET’S BUILD OUR FIRST REACT COMPONENT
/imports/ui/App.jsx
“JSX”? What’s that extension?

10. /client/main.html /client/main.js

11. UNDERSTANDING WHAT JUST HAPPENED

12. LETS INSTALL BOOTSTRAP
This is not a node module but a Meteor Package.
$: meteor add twbs:bootstrap

13. LET’S START BUILDING A PHOTO-BLOG

14. LET’S GET NECESSARY CSS AND JS FILES
• Look for “assets.zip” file in the folder “Meteor-GDG” (I guess you
have it)
• Extract the files in “/client/assets”
• All these files will be automatically loaded into your project
(Meteor magic )

15. LET’S CREATE 2 MORE REACT COMPONENTS
• Look for “nav.html” and “header.html” in the Meteor-GDG folder
• Build two React Components (just like App.jsx) naming them
“Header.jsx” and “Nav.jsx”
• These components need to be in “/imports/ui”

16. LET’S INTEGRATE EVERYTHING
/client/App.jsx

17. BACKGROUND IMAGE
• Look for ‘home-bg.jpg’ in Meteor-GDG folder
• Move the image to ‘/public’ folder in the app directory
/client/main.css

18. DO YOU SEE THIS?

19. LET’S CREATE A FORM TO WRITE A BLOG
• Create a new component “Add.jsx” using the HTML code provided.
• Let’s add a function to handle the form input

20. /imports/ui/Add.jsx

21. LET’S STORE THE INPUT INTO DATABASE
• Let’s declare our database table.
/imports/models/model.js

22. • Let’s use this model to insert the post
/imports/ui/Add.jsx

23. BUMMER!!! WHAT WENT WRONG!!
• The “insert” function tells the server side to execute.
• But the server side does not know what “Posts” is. Let’s fix this.
/server/main.js

24. LET’S TRY INSERT AGAIN

25. LET’S MAKE THE FORM BETTER
/imports/ui/Add.jsx

26. LET’S DISPLAY THE POST
• We are now going to create two more components, “Blogs” and “Post-
Single”.
• What’s Tracker? We’ll get back to this a little later
$: meteor add ultimatejs:tracker-react

27. /imports/ui/Blogs.jsx

28. • Create “PostSingle’ Component using the HTML provided
• What is React Tracker?
• What does “this.props” do?

29. LET’S ADD SECURITY TO THE APP
• Meteor Sucscribe/Publish
• Meteor Methods
$: meteor remove auto-publish
$: meteor remove insecure
Let’s just do the first part

30. LET’S ADD THE PUBLISH/SUBSCRIBE CODE
/server/main.js /imports/ui/Blogs.jsx

31. $: meteor remove insecure
/server/main.js /imports/ui/Blog.jsx

32. LET’S ADD USER ACCOUNTS
• Add “AccountsUIWrapper.jsx” file from the folder provided to “/imports/ui”
$: meteor add accounts-ui accounts-password
$: meteor add react-meteor-data
$: meteor npm install react-addons-pure-render-mixin
Let’s Add Few More Dependencies

33. WE HAVE TO CHANGE SOME CODE
/imports/App.jsx

34. /imports/App.jsx

35. KEY CONCEPTS
• Server Side Vs Client Side