3 ms·

Nice - looks very simple and lightweight! I especially like the effort put into the interactive tutorial documentation that these frameworks have. Angular and k

Nice - looks very simple and lightweight! I especially like the effort put into the interactive tutorial documentation that these frameworks have. Angular and knockout both had stand out docs too! Is there a particular niche for this framework would you say e.g. small, fast to market apps like news stories - or is is suitable for larger projects where you might normally reach for more of a "framework"?

rich_harris 13y ago
Library author here - thanks! The interactive tutorials borrow very heavily from Knockout (in fact Knockout was a big source of inspiration all round). It was initially designed to scratch my own itch - I'm a newsroom developer at the Guardian, where we turn around projects with fairly tight deadlines, so I guess you could say it's optimised for that. (Blog post here: http://www.guardian.co.uk/info/developer-blog/2013/jul/24/ractive-js-next-generation-dom-manipulation http://www.guardian.co.uk/info/developer-blog/2013/jul/24/ra...) In particular I wanted an API that wouldn't be completely mysterious to journalists who are starting to dabble with code. There's actually a separate discussion on Ractive at https://news.ycombinator.com/item?id=6096545 https://news.ycombinator.com/item?id=6096545 - I'm not sure what the HN etiquette is, can anyone enlighten me? (I appreciate both submissions though!)
- boothead 13y ago
  I've had a look at the last slide now - I think the transitions could use a little work. With that in mind - how hard would it be to integrate with d3 do you think?
  - rich_harris 13y ago
    Yes, that slide is still a bit of a work in progress. You can certainly use D3 (or any other library) alongside Ractive, though things could go awry if two libraries were trying to manipulate the same bit of the page at the same time - e.g. if an element has a style attribute like style='left: {{left}}px;' and D3 modifies the element's style, D3's changes will only last until the value of {{left}} is updated.
    - ganarajpr 13y ago
      So what is ractive.js's equivalent of $scope.$apply ? $scope.$apply is used for this specific purpose, to notify angular of any external changes.
      - rich_harris 13y ago
        $scope.$apply is necessary because sometimes changes to the model happen outside Angular's event loop. Ractive doesn't have this issue because updates always happen explicitly with ractive.set( 'key', value ) (or with array mutator methods). It's not quite as magical as Angular's frictionless updates, but it gives you slightly more control (e.g. you can do ractive.animate( 'key', value ) and so on), without needing to inherit from custom observable classes.
wiremine 13y ago
+1 on the tutorials: came to comment just on that. The layout is solid, and the content is paced well.

rich_harris 13y ago

Library author here - thanks! The interactive tutorials borrow very heavily from Knockout (in fact Knockout was a big source of inspiration all round). It was initially designed to scratch my own itch - I'm a newsroom developer at the Guardian, where we turn around projects with fairly tight deadlines, so I guess you could say it's optimised for that. (Blog post here: http://www.guardian.co.uk/info/developer-blog/2013/jul/24/ractive-js-next-generation-dom-manipulation http://www.guardian.co.uk/info/developer-blog/2013/jul/24/ra...) In particular I wanted an API that wouldn't be completely mysterious to journalists who are starting to dabble with code. There's actually a separate discussion on Ractive at https://news.ycombinator.com/item?id=6096545 https://news.ycombinator.com/item?id=6096545 - I'm not sure what the HN etiquette is, can anyone enlighten me? (I appreciate both submissions though!)

boothead 13y ago
I've had a look at the last slide now - I think the transitions could use a little work. With that in mind - how hard would it be to integrate with d3 do you think?
- rich_harris 13y ago
  Yes, that slide is still a bit of a work in progress. You can certainly use D3 (or any other library) alongside Ractive, though things could go awry if two libraries were trying to manipulate the same bit of the page at the same time - e.g. if an element has a style attribute like style='left: {{left}}px;' and D3 modifies the element's style, D3's changes will only last until the value of {{left}} is updated.
  - ganarajpr 13y ago
    So what is ractive.js's equivalent of $scope.$apply ? $scope.$apply is used for this specific purpose, to notify angular of any external changes.
    - rich_harris 13y ago
      $scope.$apply is necessary because sometimes changes to the model happen outside Angular's event loop. Ractive doesn't have this issue because updates always happen explicitly with ractive.set( 'key', value ) (or with array mutator methods). It's not quite as magical as Angular's frictionless updates, but it gives you slightly more control (e.g. you can do ractive.animate( 'key', value ) and so on), without needing to inherit from custom observable classes.

wiremine 13y ago

+1 on the tutorials: came to comment just on that. The layout is solid, and the content is paced well.