footwork.js ...a new knockout based framework.

[jona...@overfoc.us]

Hey guys...so I have something to release today that I have been working on heavily for a while now. Being a front-end developer for several years, and having been a professional developer in one respect or another for the last 16 years I've used a lot of frameworks out there (as far as javascript goes - AngularJS, Marionnette, Backbone, Knockout, and EmberJS).

Many things I've seen out there I liked, and many things I felt were not ideal. Using my past experiences with many different types of applications and requirements I began (for my own use) working on a base set of 'good to use' patterns and libraries. These coalesced, and then sometime around mid-last year I saw what it was starting to become...a full fledged javascript UI framework.

I decided to take it to fruition and see what I could do with it. I am proud of what it has become, have found it extremely useful and fun to use...and whole-heartedly think others will too.

Whats it made of? Well, the short list is: knockout.js, postal.js (https://github.com/postaljs/postal.js), lodash (https://lodash.com/), riveter (https://github.com/a2labs/riveter), (and with integrated support for) requireJS (http://requirejs.org/).

Why knockout.js? To be short - I think it is a very underappreciated library in the javascript world, using it and the observable pattern it implements combined with the rest of footwork makes for an extremely compelling framework.

Brief list of a few key features:

* Custom tags and components

* Declarative viewModel wrapping

* 2-way bindings

* Inter-module (component/viewModel/etc) communication, dependency tracking and computing (CQRS and more)

* Automatic module resolution and instantiation

* Declarative routing (with unlimited outlet and child-router support)

* Integrates well with jQuery and others (but doesn't need them)

* Drop-in replacement for knockout applications, add new functionality organically

* A whole boatload more...

So why am I posting this? I need help, I want others to use it, give feedback, write code for it, help make it better. I know javascript frameworks seemingly come out every week lately, but having built a few applications on footwork and comparing it to other frameworks I've used...I really feel it has some novel (and very useful) features not found elsewhere and that the sum of its parts far outweighs the pieces that have gone into it.

Note that at the moment there is a (mostly complete) API documentation (http://latest-docs.footworkjs.com) as well as a (also mostly complete) todo application tutorial (http://latest-docs.footworkjs.com/tutorials) available right now. Take a look!

I have put a lot of thought, time, and passion into this project...today I am opening it up to (and encouraging) scrutiny and feedback. Please feel free to comment on and discuss it, I will be sure to try and answer any questions and be as helpful as I can be.

A video introduction/screen-cast and coverage over the tutorial is being worked on and coming soon!

TLDR: New javascript framework (http://footworkjs.com) based on knockout.js... its really awesome, try it out!

[jona...@overfoc.us]

Forgot to mention the github link: https://github.com/reflectiveSingleton/footwork

[Bart Breen]

Hey, congratulations, this looks like a great framework!
Inter view model/component communication is a contentious issue and it looks like you have solved this is a really straightforward manner.

One suggestion: in your receiveFrom, you should be able to add a condition to it, so it only syncs the value if the condition is truthy.

E.g. (to use the to do app example) you might have the Todo item component repeating for each todo item (e.gitems 1-10), and an edit item component. When the edit item component submits (let's say item 6 was updated), it publishes the updated item, but you only want the Todo item component for item 6 to sync up.

self.item = fw.observable().receiveFrom('ItemEditor', 'UpdatedItem').when(function(item){return item.Id() ==self.item.Id()})

That is unless you have a better way of handling this sort of case, in which case please tell me!

[Jonathan Newman]

Thanks! I have worked hard on footwork...hopefully other people find some benefit...if not in the framework itself, maybe some of the concepts contained within.

I have seen the discussion concerning inter-viewModel/component communication. I had been working on this for a while now (and the broadcastable/subscribable stuff was mostly complete relatively early on in footworks creation)...I thought about commenting, but I knew people would want to see some code and I wasn't ready to play show-and-tell yet ;).

Anyways, I like your suggestion...one issue with that (possibly, please let me know your thoughts) is the issue that to do that '.when' will have to be extended off of the base ko.subscribable (as is the .receiveFrom and .broadcastAs methods). I am not sure how that syntax would play when it is applied to a normal ko.observable/etc...but then again, why would you then call ko.observable().when().

The other option, I feel, is to add it to an optional configuration object passed into the factory .receiveFrom() (kinda like the .broadcastAs() has an optional configuration object to specify the namespace/etc). Something like this maybe:

self.item = fw.observable().receiveFrom( 'namespaceName', { variable: 'varName', when: function(item) { return item.id() === self.item.id() } } );

I do like your syntax though, it feels natural and expressive. But either way I agree, that would be a beneficial feature...hmm....

--
You received this message because you are subscribed to a topic in the Google Groups "KnockoutJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/knockoutjs/yUmu_xQ9A5g/unsubscribe.
To unsubscribe from this group and all its topics, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jonathan Newman]

Actually, scratch that concern of mine (what I said was actually not correct about having to extend ko.subscribable for it)...and now that I've thought about it a bit more the syntax you posted will work and I do think that is the way to go. I'll see if I can play around with the idea a bit and get it in...if you could, I would be greatly appreciative if you open an issue for it on github: https://github.com/reflectiveSingleton/footwork/issues 

Thanks for the feedback!

-Jonathan

[Bart Breen]

Ok, i've submitted an issue.

Best of luck :) If i get some spare time i'll try to contribute.

[Jonathan Newman]

This feature has been added (as well as tests around it). Thanks for the suggestion...if you have any more bright ideas/thoughts please feel free to let me know :).

-Jonathan

[John Farrar]

This looks like a very interesting base package. I will check it out also.

[John Farrar]

I see you are up to FW 0.8.1, could you share some of your road here with us?

It would also be good for me to know what use case you find this to be best for as I question if Durandal, AngularJS and others do well at SEO. So this to me is not a do not use, but rather a when or how to use subject.

[John Farrar]

P.S.

Tutorial page is not working.

Error: Invalid view path 'releases/latest/docs/index.html' source: /sites/footwork-docs/application/controller/errors/error_404.php on line 7

[John Farrar]

Either that was fast response, or it is working know. Thanks either way.