Developing Backbone.js Applications on OpenShift

Developing Backbone.js Applications on OpenShift

Transcript

1. 1
   Developing Single Page Web
   Applications with Backbone.js,
   MongoDB and OpenShift
   Shekhar Gulati
   @shekhargulati
   OpenShift Evangelist, Red Hat
   

   View Slide

2. 2
   About Me
   ➢
   OpenShift Developer Evangelist at Red Hat
   ➢ Hands-on Developer
   ➢ Active blogger, speaker, and writer
   ➢
   Twitter Handle : shekhargulati
   

   View Slide

3. 3
   Agenda
   • Introducing backbone.js
   • Developing backbone.js application
   • Introducing OpenShift
   • Writing server side code
   • Deploying application on OpenShift
   

   View Slide

4. View Slide

5. 5
   Backbone.js
   ➔
   Lightweight JavaScript library ~ 6.3kb
   ➔ Brings structure to your application
   ➔ Brings MVC on client side – model, view, collections,
   router
   ➔
   One hard dependency underscore.js
   ➔
   For RESTful persistence and DOM manipulation ,
   include json2.js, and either jQuery ( >= 1.7.0) or Zepto.
   ➔ Used by LinkedIn, Foursquare, WunderKit,
   Groupon,etc. More at http://backbonejs.org/#examples
   

   View Slide

6. 6
   Why backbone.js?
   ➔
   Lightweight library not a framework, and does not have
   any opinions.
   ➔ Provides helpful methods to manipulate and query your
   data.
   ➔ Backbone does not force you to use a single template
   engine.
   ➔ Scales well eg. disqus widget and usatoday.com
   ➔
   Works well with other libraries
   Get more information at
   http://backbonejs.org/#FAQ-why-backbone
   

   View Slide

7. 7
   Backbone.js Architecture
   Backbone.js gives structure to web applications
   by providing models with key-value binding and custom
   events,
   collections with a rich API of enumerable functions,
   views with declarative event handling,
   and connects it all to your existing API over a RESTful
   JSON interface.
   

   View Slide

8. 8
   Backbone.js Application
   Components
   ➔
   Model
   ➔ Collection
   ➔ View
   ➔
   Templates
   ➔
   Router
   

   View Slide

9. 9
   Model
   ✔ Data holder – contains an
   array of attributes
   ✔
   Core of Backbone.js
   ✔
   Handles persistence
   ✔ Listen for events
   Look at model.html
   Book = Backbone.Model.extend({
   defaults : {
   title : 'Effective Java',
   author : 'Joshua Bloch'
   },
   initialize : function(){
   console.log(' In
   initialize()....');
   this.on('change',function(){
   console.log('Something
   changed...');
   });
   }
   });
   

   View Slide

10. 10
    Collection
    ✔
    A list of models
    ✔ Add, push, pop etc.
    ✔ Built on underscore.js
    Look at collection.html
    Books =
    Backbone.Collection.extend({
    localStorage : new
    Store('books-collection'),
    model : Book
    })
    var books = new Books();
    books.push(new Book());
    

    View Slide

11. 11
    Views
    ✔
    Views displays model
    ✔ Views are not HTML
    ✔ HTML comes from
    templates.
    ✔
    Works with any template
    library
    ✔
    Manipulates a DOM
    ✔ Has a Model / Collection
    look at view.html
    BooksView = Backbone.View.extend({
    el : $('#main'),
    initialize : function(){
    this.books = new Books();
    this.books.on('all',this.render,this);
    this.books.fetch();
    },
    render : function(){
    this.$el.html(this.template(this));
    return this;
    }
    });
    

    View Slide

12. 12
    Router
    ✔
    Maps URLs to functions
    ✔ Enable history and
    bookmarking
    ✔ Starting point of
    application
    Router = Backbone.Router.extend(
    routes : {
    "" : "index",
    },
    index : function(){
    console.log('in index()....');
    var booksView = new BooksView();
    this.el.empty();
    this.el.append(booksView.render().el);
    }});
    var router = new Router({el : $($('#main'))});
    Backbone.history.start();
    

    View Slide

13. 13
    Demo 1 : Developing backbone.js application
    Code walkthrough
    

    View Slide

14. 14
    Cloud Service Models
    STORAGE
    (RHS)
    HARDWARE
    (x86, Power, S/390)
    VIRTUALIZATION
    (RHEV)
    OPERATING SYSTEM
    (RHEL)
    APPLICATION PLATFORM
    (JBOSS, PHP, RUBY, ETC)
    APPLICATION
    Automated and Managed
    by the Public or Private
    Cloud Offering
    Managed and Controlled
    by Customer (IT, Dev, or
    User)
    IaaS PaaS SaaS
    Increased Control
    Increased Automation
    

    View Slide

15. 15
    What is PaaS?
    

    View Slide

16. 16
    PaaS = Platform as a Service
    A Cloud Application Platform
    Code Deploy Enjoy
    Save Time and Money
    Code your app
    Push-button
    Deploy, and
    your App is
    running in
    the Cloud!
    

    View Slide

17. View Slide

18. 18
    Why PaaS?
    
    Lets developer focus on his job i.e. to write code.
    
    You develop “Cloud Aware” applications from the
    beginning.
    
    Improves developer productivity.
    
    Reduces cost and time to market.
    
    Brings agility to product development.
    
    Gives developers the power to prototype their ideas
    rapidly.
    

    View Slide

19. 19
    OpenShift
    is
    PaaS by Red Hat
    Multi-language,
    Auto-Scaling,
    Self-service,
    Elastic,
    Cloud Application Platform
    

    View Slide

20. 20
    Developers Choose How To Work with
    OpenShift
    Developer IDE
    Integrations
    Web Browser
    Console
    Command Line
    Tooling
    REST APIs
    

    View Slide

21. 21
    What else do I get and what is the
    catch?
    
    OpenShift is free-as-in-beer & free-as-in-freedom
    
    You get three free gears, each with 512MB memory and
    1GB of disk space.
    
    Need more resources, just ask!
    
    The catch is we are in developer preview right now
    

    View Slide

22. 22
    1. Developing Bookshop application
    https://bookshop-cix.rhcloud.com/
    Note : The promo code is DELHI.FEB
    Demo
    

    View Slide

23. 23
    Some terminology for today
    1. Application – your web code and any data store. Has
    to be on 1 or more gears
    2. Gear – is like a server. It can have only 1 language for
    the web programming.
    3. Cartridge – it adds a language, a data store, or other
    functionality
    4. Git – used for version control and managing code
    between server and your development machine
    5. Ssh – command line tool to connect to your gear
    

    View Slide

24. 24
    Let's get our hands dirty
    

    View Slide

25. 25
    Create OpenShift Account
    https://openshift.redhat.com/app/account/new
    Promo code is DELHI
    

    View Slide

26. 26
    Installing Client Tools
    Install Ruby 1.8.7 or greater
    Install Git
    Install rhc OpenShift gem
    Refer to documentation
    

    View Slide

27. 27
    Setup your OpenShift Environment
    rhc setup -l
    -> ask for namespace
    -> ask to upload ssh keys
    

    View Slide

28. 28
    Creating an OpenShift Application
    rhc app create bookshop tomcat-7 mongodb-2.2
    

    View Slide

29. 29
    Look at the generated code
    

    View Slide

30. 30
    Application Deployments Options
    OpenShift supports two types of deployment options
    1) Source code deployment
    2) Binary deployment – war,ear
    

    View Slide

31. 31
    Play with MongoDB running in the Cloud
    ssh into instance
    Type mongo on the shell
    Create a sample db
    Insert some documents in the collection
    Run some queries
    

    View Slide

32. 32
    Pulling the code from GitHub
    git rm -rf src/ pom.xml
    git commit -am "removed default files"
    git remote add upstream -m master
    git://github.com/shekhargulati/bookshop-bootcamp-
    rest-quickstart.git
    git pull -s recursive -X theirs upstream master
    

    View Slide

33. 33
    Code Walkthrough
    

    View Slide

34. 34
    git push
    Deploy the code to OpenShift
    

    View Slide

35. 35
    1. OpenShift makes life great for you
    2. The tools are easy to use
    3. You should be ready to write services
    4. Almost anything you need on a server
    5. Did I mention – Free
    6. Source code
    https://github.com/shekhargulati/bookshop-bootcamp-
    rest-quickstart
    Conclusion
    

    View Slide