6 ms·

Rewriting Avira's SPA from Backbone Marionette to Angular

4 points by alexbardas 12y ago

ds_ 12y ago
Can the improvements in loading time be attributed to angular alone?
- alexbardas 12y ago
  We rethought the backend API calls and made all of them in parallel. Also, the websocket - server connection is initialized sooner. So, I'd say that this part could have also be done in backbone. It was also fast before, but we gained more than 1 second loading time with this refactoring.
cdragos 12y ago
What do you think are the best use cases for Backbone Marionette?
- alexbardas 12y ago
  I think that it may be simpler to learn than both angular and ember. Unfortunately, given the fact that it's missing 2 way data binding and it's not declarative, you end up with lots of boilerplate code and in the end you invest more time in writing your backbone application than in learning angular and writing the application in it. To be honest, I'd only start a new project in angular or ember because they are extremely productive frameworks. Backbone was great more than 2 years ago.
  - moimikey 12y ago
    I politely disagree with ending up with more boilerplate code with marionette... you're ending up with _less_ boilerplate code when using marionette with backbone, and even when including marionette, your "boilerplate" code is necessary configuration... binding dom elements, events, template handling, rendering, data serialization... even more so if you're doing it in CoffeeScript. behold... a view in 3 lines of code. class Views.AlbumTracks extends Marionette.CompositeView className: 'album-tracks' template: 'album-tracks'
    - alexbardas 12y ago
      In angular you'd never need the line with className, so you'd end up with even less code, because of its declarative style. A good reading when thinking that's necessary to bind dom elements, events, etc is here: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background http://stackoverflow.com/questions/14994391/how-do-i-think-i...
slash3r 12y ago
"We’ve just rolled out a major rewrite of the Online Essentials (Avira’s flagship product) in AngularJS." "The whole idea of this web app ..." No more antivirus solutions from Avira? It's flagship product is a web app? The rest of the article is just a useless commercial for AngularJS, filled with buzzwords and fallacies.
- alexbardas 12y ago
  It's a tech post, not an avira commercial. Maybe it will help someone make a good decision when choosing a js framework, based on real experience and facts. You can read more about the product here http://www.avira.com/en/avira-online-essentials http://www.avira.com/en/avira-online-essentials Please tell me more about the fallacies you see in the article.
  - slash3r 12y ago
    I said it's an AngularJS commercial, not an Avira commercial. But let me get the Avira part out of the way first: the article is at most an anti-commercial for Avira. You're saying that this web app is the flagship product for Avira. Do you know what a "flagship product" means? Do I really have to explain to you why a web app as a flagship product is not a good commercial for a security oriented company? But thank you for the link, go with the anti-commercial even further. And now for the useless AngularJS commercial part. Here are the fallacies: - You argue for choosing AngularJS using statistics from github, now that's an "Argumentum ad populum". You chose AngularJS just to jump on the hype-train, because you don't give any other reasons beside "look, so many others are using it, it must be good". - You don't explain how to achieve the results. You're just saying: "here are the results, you must believe me because I work at a company and write on blogs". This is called "Argument from authority". You could have crafted some toy examples to explain how is the debugging easier, or how does it help with the testability, but no such things from you. [there are more, but these will suffice] And another thing about your article: you should explain some of the buzzwords you use, not everyone knows them. For example: what does "velocity score" means and/or implies? I can't get anything about it from google, and that says a lot about it. In the end, you have a nice skeleton for an article, but is not fleshed at all. Nice color, pretty, yet absolutely worthless, graphs and no content whatsoever. I hope you don't code as you write. [edit: formating]

4 points by alexbardas 12y ago

ds_ 12y ago

Can the improvements in loading time be attributed to angular alone?

alexbardas 12y ago
We rethought the backend API calls and made all of them in parallel. Also, the websocket - server connection is initialized sooner. So, I'd say that this part could have also be done in backbone. It was also fast before, but we gained more than 1 second loading time with this refactoring.

cdragos 12y ago

What do you think are the best use cases for Backbone Marionette?

alexbardas 12y ago
I think that it may be simpler to learn than both angular and ember. Unfortunately, given the fact that it's missing 2 way data binding and it's not declarative, you end up with lots of boilerplate code and in the end you invest more time in writing your backbone application than in learning angular and writing the application in it. To be honest, I'd only start a new project in angular or ember because they are extremely productive frameworks. Backbone was great more than 2 years ago.
- moimikey 12y ago
  I politely disagree with ending up with more boilerplate code with marionette... you're ending up with _less_ boilerplate code when using marionette with backbone, and even when including marionette, your "boilerplate" code is necessary configuration... binding dom elements, events, template handling, rendering, data serialization... even more so if you're doing it in CoffeeScript. behold... a view in 3 lines of code. class Views.AlbumTracks extends Marionette.CompositeView className: 'album-tracks' template: 'album-tracks'
  - alexbardas 12y ago
    In angular you'd never need the line with className, so you'd end up with even less code, because of its declarative style. A good reading when thinking that's necessary to bind dom elements, events, etc is here: http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background http://stackoverflow.com/questions/14994391/how-do-i-think-i...

slash3r 12y ago

"We’ve just rolled out a major rewrite of the Online Essentials (Avira’s flagship product) in AngularJS." "The whole idea of this web app ..." No more antivirus solutions from Avira? It's flagship product is a web app? The rest of the article is just a useless commercial for AngularJS, filled with buzzwords and fallacies.

alexbardas 12y ago
It's a tech post, not an avira commercial. Maybe it will help someone make a good decision when choosing a js framework, based on real experience and facts. You can read more about the product here http://www.avira.com/en/avira-online-essentials http://www.avira.com/en/avira-online-essentials Please tell me more about the fallacies you see in the article.
- slash3r 12y ago
  I said it's an AngularJS commercial, not an Avira commercial. But let me get the Avira part out of the way first: the article is at most an anti-commercial for Avira. You're saying that this web app is the flagship product for Avira. Do you know what a "flagship product" means? Do I really have to explain to you why a web app as a flagship product is not a good commercial for a security oriented company? But thank you for the link, go with the anti-commercial even further. And now for the useless AngularJS commercial part. Here are the fallacies: - You argue for choosing AngularJS using statistics from github, now that's an "Argumentum ad populum". You chose AngularJS just to jump on the hype-train, because you don't give any other reasons beside "look, so many others are using it, it must be good". - You don't explain how to achieve the results. You're just saying: "here are the results, you must believe me because I work at a company and write on blogs". This is called "Argument from authority". You could have crafted some toy examples to explain how is the debugging easier, or how does it help with the testability, but no such things from you. [there are more, but these will suffice] And another thing about your article: you should explain some of the buzzwords you use, not everyone knows them. For example: what does "velocity score" means and/or implies? I can't get anything about it from google, and that says a lot about it. In the end, you have a nice skeleton for an article, but is not fleshed at all. Nice color, pretty, yet absolutely worthless, graphs and no content whatsoever. I hope you don't code as you write. [edit: formating]