7 ms·

Knockout 3.1 ships

87 points by johnny_reilly 13y ago

Romoku 13y ago
Knockout is my go to library when I need data binding. It's lightweight and doesn't interfere with your markup.
- stoodder 13y ago
  This is my favorite 'feature' of knockout. It's as simple as knowing a single attribute 'data-bind' or comment pattern ''. The only down side that I've seen is not having an 'else' statement :/. That's just a by-product of how knockout's bindings work though and hasn't stopped me once from keeping it my preferred library.
siegecraft 13y ago
Release notes: https://github.com/knockout/knockout/releases/tag/v3.1.0 https://github.com/knockout/knockout/releases/tag/v3.1.0
jimaek 13y ago
Added to CDN too http://www.jsdelivr.com/#!knockout http://www.jsdelivr.com/#!knockout
shaunol 13y ago
Knockout is so, so good. I just wish it had proper API documentation. There are no real docs, only examples/tutorials, this can be quite frustrating. If you've never used data bindings in HTML/JS, you HAVE to give this a try. If you're still using jQuery & other manual event handlers to change the state of your UI, you GOTTA try it!
- speg 13y ago
  I just started building in knockout again after casual off and on use for the past couple years. At least those tutorials are very good!
  - fournm 13y ago
    This. Knockout's tutorials made me far more seriously look at it than Ember for a side project I was playing around with recently, coming from the position of not knowing either of them.
- camus2 13y ago
  cant be worse than AngularJS doc... The doc doesnt make sense at all, the framework itself is not that complicated to use,but come on, the documentation is a shame,the new doc is even worse, less code exemples than before, nothing makes sense when reading it. Half the api is not explained. Instead of going with a simple rst / readthedoc format, they made (generated) something bloated and useless. I'm a huge Angular fan,but come on,it's not a little open source project,Google has the money to hire 1 person that can write docs...
- warp 13y ago
  The documentation seemed fine to me. What is missing from http://knockoutjs.com/documentation/introduction.html http://knockoutjs.com/documentation/introduction.html in your opinion?
- jf22 13y ago
  If you've never done a SPA before just skip knockout and head to angular or ember. Your app can out grow knockout and then your stuck rolling your own location provider,dependency injection and more. 2-3 years ago knockout was a breath of fresh air but know its just old and dated technology.
  - shiz 13y ago
    Can you elaborate on why knockout is old and dated? It's HTML and JS, just like the others. And compared to the bloat that is angular and especially ember, I find knockout strikes with simplicity and 'keeping-it-simple'.
    - taude 13y ago
      It's not. And not everything should be architected as a SPA, but more likely multiple page SPAs. Your users probably don't go to every module of a large app with the same frequency...
  - sehr 13y ago
    Or you can just wire up different libraries as needed and forgo the usage of a entire framework...
  - skilesare 13y ago
    Knockout + Backbone Router is all you really need. It will save massive headaches from trying to shoe horn something in to angular or ember.
- taude 13y ago
  We didn't actually find the documentation and examples that bad. I had a team of heavy front-end (html/css/Jquery) developers get up to speed in knockout fairly easily. It would have been a nightmare explaining to them how to make Angular directives and some of the more complex services stuff. BTW, I think Knockout is just prescriptive enough to get a pretty tight maintainable codebase, but without causing another layer of wrapping/complexity when you want to use existing JQuery components.
leo_mck 13y ago
It always baffle me how little people here talk about DurandalJS (that uses knockout for its bindings). It is a nice alternative to angular... and it uses knockout which is awesome. If you like knockout, you should really take a look at it.
- avenger123 13y ago
  Is it still worthwhile if you're not developing single page apps?
  - Romoku 13y ago
    You can add SPA functionality to any page on a website. There's nothing preventing you from using your favorite SPA stack on specific pages.
    - taude 13y ago
      Exactly this. Most people's huge, monolithic apps should be partitioned out into smaller, more modular apps. They're easier for multiple developers to work on, they're easier to spec out, they can have their own optimization/iteration cycle, etc. An example, we have an app that so far consists of about 25 individual SPAs. It was originally an SPA, but we ran into tons of problems with routing issues that cropped up, and realization that when the user uses the apps, in any given session they'd probably only use 20% of what it offers. Developers get to work quickly on their modules, there's no up front initialization/download of the entire apps. Some of the apps are more prototype quality to get the job done, some have been refactored several times. But they all form a cohesive experience. It's also nice when you're developing a group of functionality that you don't have to start the app at the beginning. Most users won't even know when their in a SPA vs Multi-page SPA.
  - benmorris 13y ago
    If you're not developing SPA apps you'll likely just need data binding (knockout) only. I've had many situations where I don't need the routing and other functions of a SPA framework like Durandal. However, Durandal is pretty modular so you can tap into whatever part you need since it uses require.js.
Mizza 13y ago
Any Django developers interested in Knockout may want to checkout my Django-Knockout-Modeler project: https://github.com/Miserlou/django-knockout-modeler https://github.com/Miserlou/django-knockout-modeler
basicallydan 13y ago
I love knockout but I'm not sure whether to risk using it in mobile apps. Can anybody report on performance in a mobile SPA with a few views?
- benmorris 13y ago
  Knockout is pretty focused on what it is for (data binding). In my experience it works well for mobile apps as well. If you want full blown SPA with knockout check out Durandal. I'm also using it with success on mobile.
  - basicallydan 13y ago
    Great, thanks!
- taude 13y ago
  We're using it in a responsive website that renders on tablets...not quite mobile, and not delivered via a packaged web-view app. It performs fine for 99% t of our use cases on more modern tablets. Most JavaScript apps suck on < iPad 2 vintage tablets anyway. I wouldn't go rendering a 1000 templates client-side with it. (We have one list that renders a complex template 100x) and it takes about 3500 ms for the knockout rendering of it. This template has maybe 20 conditionals in it or so.
  - basicallydan 13y ago
    That's good to hear. Thanks very much for your thoughts :)
- skilesare 13y ago
  It is all in how you set up your bindings. If you have everything 'visible' to the user at once you're going to get some slow performance. I have a simple state observable and then I wrap my 'views' in a if: state() == 'x' knockout comment. This moves the entire view out of memory until the state changes. In addition I have a fixture loader that loads the view files in as they are needed. This speed things up nicely as my base html file is much smaller.
caseyf7 13y ago
What about Ractivejs.org? It looks similar. Can anyone compare their experience with the two?
mattchamb 13y ago
knockout is such an awesome library. I have only used it for a few toy projects, but I love how lightweight it feels; and how it doesnt feel like it takes over all of your html. I also love how the ko.observable doesnt feel as magical as the angular binding. It makes me feel alot more in control
- mattmanser 13y ago
  Yeah, instead it takes over your javascript turning properties into methods: var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123) }; myViewModel.personName() //get myViewModel.personName('Mary') //set Makes my eyes bleed.
  - gdrulia 13y ago
    Yeah, at least this way you have control over which properties are methods. Also, if you really prefer angular.js style of tracking dependencies, this plugin makes the trick http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/ http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-pl...
    - mattmanser 13y ago
      Thanks, looks good. I know it sounds pedantic but it's not 'prefer', it's that the properties as methods is fundamentally changing the way the language works and is very brittle.
      - klibertp 13y ago
        http://en.wikipedia.org/wiki/Uniform_access_principle http://en.wikipedia.org/wiki/Uniform_access_principle In short, it doesn't matter which it is - a method or an attribute - as long as it's consistent. What fundamental changes to the language you see when using methods instead of plain attributes? Aside from the fact that setter and getter methods in JS are bindable while attribute access is not.
diggan 13y ago
Actual changelog for people interested: https://github.com/knockout/knockout/releases/tag/v3.1.0 https://github.com/knockout/knockout/releases/tag/v3.1.0 TL;DR: "This release focuses mainly on performance and stability/compatibility improvements, plus small enhancements to existing functionality (yes, we're saving the big new features for v3.2). [...]"
NicoJuicy 13y ago
Using knockout since shortly because it's more supported on .Net (it will ship with Visual Studio). And i have to say, i'm amazed by it.. It's pretty awesome to create my first EditableHTML :)
bvanvugt 13y ago
This is awesome, always happy to see continued work on Knockout. We use it in our production single-page app at sendwithus, and while AngularJS is tempting, Knockout is so lightweight and nimble that it lets us move really quickly on front-end features.
benmorris 13y ago
I'm a big fan of knockout. I find myself using it in a lot of places. The declarative binding makes it so much easier to come back months or weeks after writing code and clearly see what is going on. That is opposed to the old way of using Jquery and a mess of glue code to tie models and elements together. Knockout has also saved me a lot of time and reduced the amount of javascript needed significantly.
noir_lord 13y ago
I absolutely adore Knockout.js. I'm building a large enterprise SaaS system single handedly and while I'm a competent to good backend developer my front end skills are weak (mostly ancient JS and then jQuery stuff up to writing jQuery plugins) and Knockout has saved my bacon (when combined with Bootstrap 3). It took me a weekend to get my head around the approach (and force feed some JS knowledge I was weak on) into my head and then on the Monday I wrote my first custom binding handler to allow me to do async file uploads (think Gmail attachments) as easily as <input data-bind="ajaxfile: { property: 'photo', url: '/ajax/upload', maxsize: 8388608, image: true}" type="file"> The ability to use that to upload a file into the temporary store, return the hash for the file which is then submitted when the form is saved makes for a nicer UX (I hate those You clicked save not wait 5 minutes while we attach these pdf style messages) and has saved me a huge amount of time trying to shoehorn more complex jquery plugins that kinda-sorta do what I want if I squint at them. The actual architecture is multi-page with each page been bound to it's own view model (as the vast majority of pages are either forms, editing forms or showing tables) this has worked out really well so far (I also have a custom binding to bind a knockout property directly to a jquery datatable 1.10 instance which has made life somewhat easier but it's hairy code (on the limit of what I'm capable of with javascript)).

Knockout 3.1 ships

87 points by johnny_reilly 13y ago

Romoku 13y ago

Knockout is my go to library when I need data binding. It's lightweight and doesn't interfere with your markup.

stoodder 13y ago
This is my favorite 'feature' of knockout. It's as simple as knowing a single attribute 'data-bind' or comment pattern ''. The only down side that I've seen is not having an 'else' statement :/. That's just a by-product of how knockout's bindings work though and hasn't stopped me once from keeping it my preferred library.

siegecraft 13y ago

Release notes: https://github.com/knockout/knockout/releases/tag/v3.1.0 https://github.com/knockout/knockout/releases/tag/v3.1.0

jimaek 13y ago

Added to CDN too http://www.jsdelivr.com/#!knockout http://www.jsdelivr.com/#!knockout

shaunol 13y ago

Knockout is so, so good. I just wish it had proper API documentation. There are no real docs, only examples/tutorials, this can be quite frustrating. If you've never used data bindings in HTML/JS, you HAVE to give this a try. If you're still using jQuery & other manual event handlers to change the state of your UI, you GOTTA try it!

speg 13y ago
I just started building in knockout again after casual off and on use for the past couple years. At least those tutorials are very good!
- fournm 13y ago
  This. Knockout's tutorials made me far more seriously look at it than Ember for a side project I was playing around with recently, coming from the position of not knowing either of them.
camus2 13y ago
cant be worse than AngularJS doc... The doc doesnt make sense at all, the framework itself is not that complicated to use,but come on, the documentation is a shame,the new doc is even worse, less code exemples than before, nothing makes sense when reading it. Half the api is not explained. Instead of going with a simple rst / readthedoc format, they made (generated) something bloated and useless. I'm a huge Angular fan,but come on,it's not a little open source project,Google has the money to hire 1 person that can write docs...
warp 13y ago
The documentation seemed fine to me. What is missing from http://knockoutjs.com/documentation/introduction.html http://knockoutjs.com/documentation/introduction.html in your opinion?
jf22 13y ago
If you've never done a SPA before just skip knockout and head to angular or ember. Your app can out grow knockout and then your stuck rolling your own location provider,dependency injection and more. 2-3 years ago knockout was a breath of fresh air but know its just old and dated technology.
- shiz 13y ago
  Can you elaborate on why knockout is old and dated? It's HTML and JS, just like the others. And compared to the bloat that is angular and especially ember, I find knockout strikes with simplicity and 'keeping-it-simple'.
  - taude 13y ago
    It's not. And not everything should be architected as a SPA, but more likely multiple page SPAs. Your users probably don't go to every module of a large app with the same frequency...
- sehr 13y ago
  Or you can just wire up different libraries as needed and forgo the usage of a entire framework...
- skilesare 13y ago
  Knockout + Backbone Router is all you really need. It will save massive headaches from trying to shoe horn something in to angular or ember.
taude 13y ago
We didn't actually find the documentation and examples that bad. I had a team of heavy front-end (html/css/Jquery) developers get up to speed in knockout fairly easily. It would have been a nightmare explaining to them how to make Angular directives and some of the more complex services stuff. BTW, I think Knockout is just prescriptive enough to get a pretty tight maintainable codebase, but without causing another layer of wrapping/complexity when you want to use existing JQuery components.

leo_mck 13y ago

It always baffle me how little people here talk about DurandalJS (that uses knockout for its bindings). It is a nice alternative to angular... and it uses knockout which is awesome. If you like knockout, you should really take a look at it.

avenger123 13y ago
Is it still worthwhile if you're not developing single page apps?
- Romoku 13y ago
  You can add SPA functionality to any page on a website. There's nothing preventing you from using your favorite SPA stack on specific pages.
  - taude 13y ago
    Exactly this. Most people's huge, monolithic apps should be partitioned out into smaller, more modular apps. They're easier for multiple developers to work on, they're easier to spec out, they can have their own optimization/iteration cycle, etc. An example, we have an app that so far consists of about 25 individual SPAs. It was originally an SPA, but we ran into tons of problems with routing issues that cropped up, and realization that when the user uses the apps, in any given session they'd probably only use 20% of what it offers. Developers get to work quickly on their modules, there's no up front initialization/download of the entire apps. Some of the apps are more prototype quality to get the job done, some have been refactored several times. But they all form a cohesive experience. It's also nice when you're developing a group of functionality that you don't have to start the app at the beginning. Most users won't even know when their in a SPA vs Multi-page SPA.
- benmorris 13y ago
  If you're not developing SPA apps you'll likely just need data binding (knockout) only. I've had many situations where I don't need the routing and other functions of a SPA framework like Durandal. However, Durandal is pretty modular so you can tap into whatever part you need since it uses require.js.

Mizza 13y ago

Any Django developers interested in Knockout may want to checkout my Django-Knockout-Modeler project: https://github.com/Miserlou/django-knockout-modeler https://github.com/Miserlou/django-knockout-modeler

basicallydan 13y ago

I love knockout but I'm not sure whether to risk using it in mobile apps. Can anybody report on performance in a mobile SPA with a few views?

benmorris 13y ago
Knockout is pretty focused on what it is for (data binding). In my experience it works well for mobile apps as well. If you want full blown SPA with knockout check out Durandal. I'm also using it with success on mobile.
- basicallydan 13y ago
  Great, thanks!
taude 13y ago
We're using it in a responsive website that renders on tablets...not quite mobile, and not delivered via a packaged web-view app. It performs fine for 99% t of our use cases on more modern tablets. Most JavaScript apps suck on < iPad 2 vintage tablets anyway. I wouldn't go rendering a 1000 templates client-side with it. (We have one list that renders a complex template 100x) and it takes about 3500 ms for the knockout rendering of it. This template has maybe 20 conditionals in it or so.
- basicallydan 13y ago
  That's good to hear. Thanks very much for your thoughts :)
skilesare 13y ago
It is all in how you set up your bindings. If you have everything 'visible' to the user at once you're going to get some slow performance. I have a simple state observable and then I wrap my 'views' in a if: state() == 'x' knockout comment. This moves the entire view out of memory until the state changes. In addition I have a fixture loader that loads the view files in as they are needed. This speed things up nicely as my base html file is much smaller.

caseyf7 13y ago

What about Ractivejs.org? It looks similar. Can anyone compare their experience with the two?

mattchamb 13y ago

knockout is such an awesome library. I have only used it for a few toy projects, but I love how lightweight it feels; and how it doesnt feel like it takes over all of your html. I also love how the ko.observable doesnt feel as magical as the angular binding. It makes me feel alot more in control

mattmanser 13y ago
Yeah, instead it takes over your javascript turning properties into methods: var myViewModel = { personName: ko.observable('Bob'), personAge: ko.observable(123) }; myViewModel.personName() //get myViewModel.personName('Mary') //set Makes my eyes bleed.
- gdrulia 13y ago
  Yeah, at least this way you have control over which properties are methods. Also, if you really prefer angular.js style of tracking dependencies, this plugin makes the trick http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-plugin-to-simplify-your-syntax/ http://blog.stevensanderson.com/2013/05/20/knockout-es5-a-pl...
  - mattmanser 13y ago
    Thanks, looks good. I know it sounds pedantic but it's not 'prefer', it's that the properties as methods is fundamentally changing the way the language works and is very brittle.
    - klibertp 13y ago
      http://en.wikipedia.org/wiki/Uniform_access_principle http://en.wikipedia.org/wiki/Uniform_access_principle In short, it doesn't matter which it is - a method or an attribute - as long as it's consistent. What fundamental changes to the language you see when using methods instead of plain attributes? Aside from the fact that setter and getter methods in JS are bindable while attribute access is not.

diggan 13y ago

Actual changelog for people interested: https://github.com/knockout/knockout/releases/tag/v3.1.0 https://github.com/knockout/knockout/releases/tag/v3.1.0 TL;DR: "This release focuses mainly on performance and stability/compatibility improvements, plus small enhancements to existing functionality (yes, we're saving the big new features for v3.2). [...]"

NicoJuicy 13y ago

Using knockout since shortly because it's more supported on .Net (it will ship with Visual Studio). And i have to say, i'm amazed by it.. It's pretty awesome to create my first EditableHTML :)

bvanvugt 13y ago

This is awesome, always happy to see continued work on Knockout. We use it in our production single-page app at sendwithus, and while AngularJS is tempting, Knockout is so lightweight and nimble that it lets us move really quickly on front-end features.

benmorris 13y ago

I'm a big fan of knockout. I find myself using it in a lot of places. The declarative binding makes it so much easier to come back months or weeks after writing code and clearly see what is going on. That is opposed to the old way of using Jquery and a mess of glue code to tie models and elements together. Knockout has also saved me a lot of time and reduced the amount of javascript needed significantly.

noir_lord 13y ago

I absolutely adore Knockout.js. I'm building a large enterprise SaaS system single handedly and while I'm a competent to good backend developer my front end skills are weak (mostly ancient JS and then jQuery stuff up to writing jQuery plugins) and Knockout has saved my bacon (when combined with Bootstrap 3). It took me a weekend to get my head around the approach (and force feed some JS knowledge I was weak on) into my head and then on the Monday I wrote my first custom binding handler to allow me to do async file uploads (think Gmail attachments) as easily as <input data-bind="ajaxfile: { property: 'photo', url: '/ajax/upload', maxsize: 8388608, image: true}" type="file"> The ability to use that to upload a file into the temporary store, return the hash for the file which is then submitted when the form is saved makes for a nicer UX (I hate those You clicked save not wait 5 minutes while we attach these pdf style messages) and has saved me a huge amount of time trying to shoehorn more complex jquery plugins that kinda-sorta do what I want if I squint at them. The actual architecture is multi-page with each page been bound to it's own view model (as the vast majority of pages are either forms, editing forms or showing tables) this has worked out really well so far (I also have a custom binding to bind a knockout property directly to a jquery datatable 1.10 instance which has made life somewhat easier but it's hairy code (on the limit of what I'm capable of with javascript)).