As part of the changes I'm making to the API for 0.6, I thought I'd talk about some of the goals and things I want to fix:
Extract the data-binding engine
This will allow me to finish of the virtual DOM engine. When creating a view you would need to choose a rendering engine for the view.
var bindings = binder(template)
.use(someDirective)
.use(someFiltersAndShit);
var View = ripple()
.engine(bindings);
The syntax for this is still a little in progress, but the code behind it works, it's just a matter of making it feel nice in the API.
Less confusing API
At the moment, you need to listen to events on the class and possibly on the instance.
View.on('mounted', function(view){
view.foo = bar;
});
View.prototype.submit = function() {
this.foo = bar;
};
This is a little confusing having them next to each other but with a different syntax. Obviously one is an event and the other is a handler. There are a couple of examples of how this could work here: https://gist.github.com/anthonyshort/2dbf56c398f320a4db61
Option 1:
At the moment, I think this might be the nicest solution:
var View = ripple({
initialize: function(){},
mounted: function(){
this.foo = bar;
},
submit: function(){
this.foo = bar;
}
});
View
.use(binding(template))
.attr('foo');And if a key an event lifecycle name we'd add it as a callback automatically. This is a little too much magic possibly, but it does create a nice abstraction and allows all the methods to be in place.
Option 2
We use the ripple() function to create View that we inherit from:
var View = ripple()
.engine(bindings)
.attr('firstName')
.attr('lastName');
View.on('initialize', function(view){
view.foo = bar;
});
module.exports = View.extend({
onClick: function(event){
console.log('clicked!');
}
});Again, I think this confuses things because there are two different ways to add 'methods' and each has a different context. We'd also be using inheritance.
Option 3
Using a handler or method function to add methods so that it follows the same syntax as the events:
View.on('initialize', function(view){
view.foo = bar;
});
View.handler('onClick', function(view, event){
view.foo = bar;
});Allow for ES6 modules and classes
If we used Option 1 above, it could possibly allow us to have a nice syntax for using ES6 classes. It's not necessary, but it would be nice.
import ripple from 'ripple';
import binder from 'binder';
import template from './template';
var bindings = binder()
.use(someDirective)
.use(someFiltersAndShit);
class View {
constructor() {
super();
console.log('initializing a view!');
},
onClick(event) {
console.log('clicked!');
}
}
export ripple(View)
.engine(bindings(template))
.attr('firstName')
.attr('lastName');With an alternative syntax using extends
var Base = ripple()
.engine(bindings(template))
.attr('firstName')
.attr('lastName');
exports class View extends Base {
initialize() {
console.log('initializing a view!');
},
onClick(event) {
console.log('clicked!');
}
}Option 1, at the very least, would allow us to do this:
var View = ripple({
mounted() {
this.foo = bar;
},
submit() {
this.foo = bar;
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent