Programming in the Reactive Style with Meteor JS
•
23 j'aime•16,670 vues
Save 10% off ANY FITC event with discount code 'slideshare' See our upcoming events at www.fitc.ca OVERVIEW Meteor allows you to quickly create new web applications. Using a single code base for the client and the server, no-sql mongo, template-oriented UX organization and painless deployment, designing and developing with Meteor is fun. But the real game changer is Reactivity. Reactivity is made up of two parts – data sources and computations. When you build a page, Meteor remembers the computations that use reactive data sources. Then, when a data in a reactive source changes, the computations that depend on the data are invalidated and re-run – which can re-render the affected parts of your application. The true beauty of it is that it’s all automatic. You don’t need to write any code to watch for changes – Meteor does all that for you. Learning to build web applications in the Reactive Style gives you more time to concentrate on UX than traditional web development. Being able to side-step much of the application setup and data management frees you to focus on providing a pleasurable experience as well as useful functionality.
Recommandé
Contenu connexe
En vedette
En vedette (16)
Plus de FITC
Plus de FITC (20)
Dernier
Dernier (20)
Programming in the Reactive Style with Meteor JS
- 2. What’s Meteor about? “A better way to build apps.” “Meteor is an open source platform for building top-quality web apps in a fraction of the time, whether you’re an expert developer or just getting started.” ally? Re
- 4. Programming in the Reactive Style using Meteor JS Dave Anderson dave@neo.com @eymiha
- 5. Why Meteor?
- 6. Will Meteor make your web apps look better?
- 7. Will Meteor make it easier to build web apps users will enjoy?
- 8. Will Meteor stop the software apocalypse from coming?
- 9. Three Virtues of a Great Web Developer Programmer • • • Laziness Impatience Hubris
- 10. • Laziness
- 11. • Impatience
- 12. • Hubris
- 13. What Matters? • • • Fastest to Goal Most for Least Effort It Just Works
- 14. What Obstructs? • • • • Wide Technology Stack Finding and Changing Code ‘Extra’ Coding Conventional Flow
- 15. Traditional Wide Web Technology Stack Client: HTML, CSS, JavaScript ! Server: Programming Language, Database Access, Marshaling Language
- 16. Meteor Web Technology Stack Client: HTML, CSS, JavaScript, MiniMongo ! Server: JavaScript, Mongo
- 17. Additional Stack Java JavaScript libs, Jar files Ruby on Rails JavaScript libs, Gem files ASP Controls, Extensions Clojure Clojure files Meteor packages
- 18. How We Must Code Nine months ago you wrote some code...
- 19. How We Must Code Today you have to find and change it...
- 20. Follow the Breadcrumbs... from the app in the browser ...to a search of the code base ...to the app inspector... ...repeatedly
- 21. Searching for Code, Traditionally • look for element by CSS selector • look for action bound to element • look for code that emits element • look for code that changes CSS selector • keep looking inward...
- 22. Changing Code, Traditionally • Change all the places! • Test like the Dickens! • ummm... did you really change all the places?
- 23. Searching for Code in Meteor • look for the template that emits the element • examine its html, css and javascript
- 24. Changing Code in Meteor • Change the code in the template • Test the changes (tinytest, laika, …)
- 25. ‘Extra’ Coding This one is hard to quantify. HTML with handlebar templates JavaScript / CoffeeScript CSS / SCSS packages the code needed to build a Meteor-based web UX is the most straightforward I’ve found. YMMV
- 26. Conventional Flow Code uses the current values when called. If a is 5 and b is 3, then c = a+b would set c to 8. Later, if a became 4 and b became 2, then c would still be 8 - until the code was called again.
- 27. Reactive Flow Code uses values as they change. If a is 5 and b is 3, then c = a+b would set c to 8. Later, if a became 4 and b became 2, then c would become 6 automatically.
- 28. Reactive Style Programming is about writing code that renders values when they are delivered not code that retrieves values so they can be rendered. Data is pushed, not pulled.
- 29. How about an example... Let’s Take Attendance!
- 31. webu13attend Deconstruction client-only code shared code webby bits server-only code
- 41. A Closer Look at Reactivity
- 42. Reactivity from the new-to-Meteor perspective...
- 43. In the frameworks you’re probably used to, a web application is coded Imperatively. In Meteor using its Reactive framework, a web application is coded Declaratively.
- 44. Imperative Coding if you’re lucky enough to have database notification through an observe-like function, you implement callbacks Items.find().observe! added: (item) ->! $('ul').append '<li id="'+item._id+'">'+! item.name+'</li>'! changed: (item) ->! $('ul li#'+item._id).text item.name! removed: (item) -> ! $('ul li#'+item._id).detach()
- 45. Declarative Coding Meteor does the observe callback behind the scenes <template name="itemList">! <ul>! {{#each items}}! <li>{{name}}</li>! {{/each}}! </ul>! </template> Template.itemList.helpers! items: -> Items.find()
- 46. How does Reactivity work? JS f Reactive Source first use
- 47. How does Reactivity work? JS f Reactive Source Computation Processing
- 48. How does Reactivity work? JS f Reactive Source Dependency Established
- 49. How does Reactivity work? JS f Reactive Source ready to go
- 50. Why Computations? Because Meteor has the potential to change the entire interface when a reactive source changes! Changes based on a computation becoming invalid focus on only the parts of the interface that depend on the computation.
- 51. How does Reactivity work? JS f Reactive Source ready to go
- 52. How does Reactivity work? JS f Reactive Source Source Updated
- 53. How does Reactivity work? JS f Reactive Source Computation Invalidated
- 54. How does Reactivity work? JS f Reactive Source Computation Processing
- 55. How does Reactivity work? JS f Reactive Source Computation Processing
- 56. How does Reactivity work? JS f Reactive Source ready to go
- 57. What are Reactive Sources? remote local (client) database queries (subscriptions) session variables status user / user id logging in subscription ready
- 58. Reactivity from the Meteor-savvy perspective... The magic is all in the Deps object!
- 59. How does the Deps object work? Deps Computation Dependency
- 63. An Example: Injectives Sessions variables are reactive sources global to the client. An Injective is a local reactive source that can be more closely scoped to the functions and objects that uses it.
- 64. Deps.injective = (init) ->! _value: init ? 0! _dep: new Deps.Dependency! ! set: (value) ->! if (@_value != value)! @_value = value! @changed()! get: ->! @depend()! @_value! depend: ->! @_dep.depend()! changed: ->! @_dep.changed()
- 65. Consider the use of the an injective: Foo.innerWidth =! Deps.injective window.innerWidth Any computation that calls Foo.innerWidth.get( ) will react when its value changes. So then, $(window).resize ->! Foo.innerWidth.set window.innerWidth
- 66. Example of Injectives Use the height and width of a browser window to control the size of some objects. innerWidth = Deps.injective window.innerWidth! innerHeight = Deps.injective window.innerHeight! ! $(window).resize ->! innerWidth.set window.innerWidth! innerHeight.set window.innerHeight! ! Template.box.helpers! size: ->! Math.floor (innerWidth.get()+innerHeight.get())/4.0
- 67. So why should Meteor and Reactivity Narrower technology stack • matter to change • Easier to find and me? code • • Less extra coding Changes are pushed, not pulled
- 68. When not to use Meteor
- 69. Try It! the ke ge Ta len al Ch or te e M Give it two weeks and expand what you know about building web applications!