SpineJS

A basic introduction to SpineJS

Transcript

1. Mike Silvis Spine JS Hungry Academy Class of 2012 Thursday, July 12, 12
2. Mike Silvis Spine JS Hungry Academy Class of 2012 MIKESILVIS Thursday, July 12, 12
3. SPINEJS - 3 SIMPLE CONCEPTS Thursday, July 12, 12
4. SPINEJS - 3 SIMPLE CONCEPTS MVC The Model View Controller pattern is at the heart of Spine, and absolutely integral to modern JavaScript applications. Thursday, July 12, 12
5. SPINEJS - 3 SIMPLE CONCEPTS MVC The Model View Controller pattern is at the heart of Spine, and absolutely integral to modern JavaScript applications. Thursday, July 12, 12
6. SPINEJS - 3 SIMPLE CONCEPTS MVC The Model View Controller pattern is at the heart of Spine, and absolutely integral to modern JavaScript applications. DOCUMENTATION Spine strives to have the best, and most friendly documentation for any JavaScript framework available. Thursday, July 12, 12
7. SPINEJS - 3 SIMPLE CONCEPTS MVC The Model View Controller pattern is at the heart of Spine, and absolutely integral to modern JavaScript applications. SIMPLICITY Spine is a simple and lightweight framework, and doesn't consist of a vast amount of complex widgets to configure and theme. DOCUMENTATION Spine strives to have the best, and most friendly documentation for any JavaScript framework available. Thursday, July 12, 12
8. ABOUT THE MAN BEHIND IT ALL WORKS AT TWITTER PRIMARILY RAILS / JAVASCRIPT DEVELOPER WROTE JAVASCRIPT WEB APPLICATIONS ALEX MACCAW Thursday, July 12, 12
9. SCREENCASTS! AND A LOT MORE EXAMPLES ON HOW TO GET STARTED SPINE CONTACTS SPINE & RAILS INFINITE SCROLLING WITH SPINE & RAILS REALTIME WITH SPINE & RAILS Thursday, July 12, 12
10. AMAZING DOCUMENTATION Thursday, July 12, 12
11. SIMPLE. BUILT INTO RAILS Thursday, July 12, 12
12. SIMPLE. BUILT INTO RAILS rails generate blog rails generate scaffold Post Thursday, July 12, 12
13. SIMPLE. BUILT INTO RAILS gem 'jquery-rails' # built on JQuery gem 'spine-rails' # Spine app gem 'eco' # Template rails generate blog rails generate scaffold Post Thursday, July 12, 12
14. SIMPLE. BUILT INTO RAILS gem 'jquery-rails' # built on JQuery gem 'spine-rails' # Spine app gem 'eco' # Template rails generate spine:new rails generate spine:scaffold Post title:string content:string rails generate blog rails generate scaffold Post Thursday, July 12, 12
15. AND YOU’RE DONE! YOU NOW HAVE ACCESS TO YOUR RAILS MODELS var post = App.Post.create({ title: 'Spine', body: 'Spine & Rails, sitting in a tree!' }); post.id; // Rails DB ID Thursday, July 12, 12
16. AND YOU’RE DONE! YOU NOW HAVE ACCESS TO YOUR RAILS MODELS var post = App.Post.create({ title: 'Spine', body: 'Spine & Rails, sitting in a tree!' }); post.id; // Rails DB ID Thursday, July 12, 12
17. SOURCE CODE create: (params, options) -> @queue => @ajax( params, type: 'POST' data: JSON.stringify(@record) url: Ajax.getURL(@model) ).success(@recordResponse(options)) .error(@errorResponse(options)) Thursday, July 12, 12
18. MODELS IT LOOKS LIKE RAILS App.Post.fetch(); // Fetch records App.Post.first().content; App.Post.first().destroy(); Thursday, July 12, 12
19. ROUTES WHY WOULD I TAKE AWAY THE BACK & REFRESH BUTTON? class Posts extends Spine.Stack controllers: show: PostsShow edit: PostsEdit routes: '/posts/:id/edit': 'edit' '/posts/:id': 'show' Thursday, July 12, 12
20. VIEWS LOOK FAMILIAR? <% if @posts.length: %> <% for post in @posts: %> <a href="<%= post.url %>"><%= post.name %></a> <p><%= post.description %></p> <% end %> <% else: %> No Posts <% end %> Thursday, July 12, 12
21. CONTROLLERS class Index extends Spine.Controller events: 'click [data-type=edit]': 'edit' 'click [data-type=destroy]': 'destroy' 'click [data-type=show]': 'show' 'click [data-type=new]': 'new' constructor: -> super Room.bind 'refresh change', @render Room.fetch() render: => rooms = Room.all() @html @view('rooms/index')(rooms: rooms) Thursday, July 12, 12
22. SPINE.APP WHEN RAILS IS TOO MUCH npm install -g spine.app # Install the app spine app my_app # Create the app Thursday, July 12, 12
23. SPINE.APP WHEN RAILS IS TOO MUCH npm install -g spine.app # Install the app spine app my_app # Create the app npm install -g hem hem server ## Compile assets on the fly Thursday, July 12, 12
24. SPINE.APP WHEN RAILS IS TOO MUCH npm install -g spine.app # Install the app spine app my_app # Create the app npm install -g hem hem server ## Compile assets on the fly Thursday, July 12, 12
25. SPINE.APP WHEN RAILS IS TOO MUCH hem build ## Compile all assets to javascript npm install -g spine.app # Install the app spine app my_app # Create the app npm install -g hem hem server ## Compile assets on the fly Thursday, July 12, 12