Rapid Prototyping with MeteorJS

Meteor JS offers a toolkit for developing and publishing applications with minimal effort. The expanding plugin library is quickly growing in number. With the tools provided by Meteor JS a developer can build an application in days, not weeks. Meteor JS offers all the bells and whistles of very popular application frameworks but with a few extra special goodies. The data-base everywhere approach allows for front end javascript to interact with the tables. The data-on-the-wire approach comes out of the box, no need to call sync events or page refresh, it just works. Finally, publishing your application to the web is literally a single line in terminal.

With the combination of MongoDB and NodeJS, Meteor JS is the best all javascript solution for building and deploying applications fast!

Transcript

1. Rapid Prototyping with MeteorJS
   Out of the box solutions for real-time data applications
   

   View Slide

2. Want to be a beta user?
   

   View Slide

3. www.presentr.io
   Enter Code:
   Meteor
   

   View Slide

4. Adam Smith
   Developer at Wide Open Technologies
   Asheville, NC
   @acodesmith
   

   View Slide

5. What is a prototype?
   “A prototype is an early
   sample, model, or
   release of a product
   built to test a concept
   or process or to act as
   a thing to be replicated
   or learned from.”

   -wikipedia
   @acodesmith | @wideopentech #ConvergeSE | #meteorjs
   

   View Slide

6. Why Trust/Use Meteor?
   • Over two years of open
   source development
   • MIT License
   • $11mm in VC funding
   • Single Language
   • Integrated Package System

   (like the npm)
   • Hosted Development
   Environment
   @acodesmith | @wideopentech #ConvergeSE | #meteorjs
   

   View Slide

7. “Build apps that are a delight to
   use, faster than you ever thought
   possible”
   -meteor.com
   @acodesmith | @wideopentech #ConvergeSE | #meteorjs
   

   View Slide

8. • Modern user interface
   • Use of templates to create a reactive seamless user
   experience.
   • Radically less code
   • Data binding is out of the box. You don’t write glue
   code. You declare and it just works.
   • Browser and Mobile
   • Command line interface to install mobile SDKs and
   emulation.
   • One language everywhere
   • isomorphic packages which can be used on the client of
   the browser.
   @acodesmith | @wideopentech #ConvergeSE | #meteorjs
   

   View Slide

9. • Live updates
   • You don’t refresh! OMG!
   • Unified package system
   • atmospherejs.com - It’s like npm but for meteor
   ready packages.
   • Ultra responsive
   • Super fast interactions with fast results. 

   (not responsive design)
   • Hot deploys
   • Say what?! You can deploy hotfixes to live apps
   without disturbing the user’s session! Yes it
   works on installed apps as well.
   @acodesmith | @wideopentech #ConvergeSE | #meteorjs
   

   View Slide

10. Things to consider before jumping in…
    • Have you ever worked with javascript on the server?
    • Have you ever worked with MongoDB?
    • Where will the final project be hosted?
    • What browsers will you have to support? 

    IE6+ and well…everything else.
    @acodesmith | @wideopentech #ConvergeSE | #meteorjs
    

    View Slide

11. Templates in Meteor
    helpers
    Template.home.helpers({

    product_count: Products.count({ sold: { $ne: true } });

    });
    events
    Template.home.events({

    “click #login”: function(){ }

    });
    rendered
    Template.home.rendered = function(){

    //update ui?
    }
    @acodesmith | @wideopentech #ConvergeSE | #meteorjs
    

    View Slide

12. Templates in Meteor
    @acodesmith | @wideopentech #ConvergeSE | #meteorjs
    

    View Slide

13. Models in Meteor
    @acodesmith | @wideopentech #ConvergeSE | #meteorjs
    

    View Slide

14. Meteor Sessions
    @acodesmith | @wideopentech #ConvergeSE | #meteorjs
    “If you call Session.get("currentList") from inside a template,
    the template will automatically be rerendered whenever
    Session.set("currentList", x) is called.” -Meteor Docs
    

    View Slide

15. LIVE CODE DEMO!
    @acodesmith | @wideopentech #ConvergeSE | #meteorjs
    

    View Slide