I like what Materials and Angular are doing. I want to rewrite my site to have a nice navbar using that. But I want a very few parts of my website to have SPA. I presume for most if it, there would not be a router, but for a few pieces of it, there would.
Is this design crazy?
I don't know about crazy, but I don't really see what you are trying to do. My only guess is you want to play with it, but don't want to re-write the entire site. As far as I understand it, the appeal of SPAs is the faster loading time (all html doesn't have to be resent, just the current view). It seems sharing data between views isn't necessary in your case, so I won't get into that.
In short, there is no real reason (except maybe time) not to stick all of the tab content into their own views instead of calling a new html page. So, you have your navbar on your index page (possibly as a directive), and under that you have the space for views (tab content).
This is a really simple question, and giving your rep I feel like I am missing something and saying the obvious, in which case I apologize.
Related
We are trying to revamp the company website, and we have some discussion on choosing the technologies. React is one of our options.
However, the website is basically some static contents, which is hardcoded html pages with many different layouts. The contents are static and will never or seldom update. So our idea is to hard code every content into react, there is no API call to get extra contents for most of the cases (except few pages which will load the price table and news from our CMS).
I want to ask react experts for such scenario is it good to use react? Is it a common practice?
I would highly recommend against using React for your situation because there would be no difference at all.
React, and SPA's(Single Page Applications) in general, excel in scenario's where a page might constantly need to be refreshed because of new or changing data. Since you said your content is static with no changes or API calls, this is the opposite of React's intended use.
I recommend sticking with the technologies you're currently using. If you want to revamp the website i would say to focus more on the design and it look more modern through CSS and maybe some jQuery.
Is it good practice to combine MVVM [angularjs,knockout.js]with MVC [JSF/spring].
Is it good way to control mvvm object/variables/ from inside JSF page.
Lets say I have to update a dropdown list in angularjs model by using jsf controller to fetch list object and update angularjs dropdown model. Is this a clean way or a junk way or is it just a work around.
I have to admit that I don't really know JSF or Knockout. However, I can easily imagine that because both sides want to be in charge of viewed components, a component based framework like JSF or Wicket might have trouble playing together with Angular. A couple things come to mind:
Why do you need the component framework from the server side? Why not use a request-based framework like Spring MVC or struts? They should work fine as they are just taking care of the overall page loading.
You will probably be ok if you decide to use one technology to do one thing. For example, do your page containers with JSF, and everything inside the page with Angular. I think you'll be ok with that. Of course, you are losing a big part of the benefit of JSF.
I'm actually doing this right now. I can't say what the best practice is, but we found that we needed to be able to output dynamic HTML from the server, even if you have an MVVM framework in the front end. Things like internationalization is better handled on the server side, and with purely static HTML from the server you run into a lot of limitations.
The main drawback is complexity. You will have controllers, models and views on the server, combined with controllers, templates and viewmodels on the client. This makes the architecture a bit confusing, especially as you bring new members into the team, so documentation and code structure becomes very important.
Overall, I think it's a valid approach. It hasnt bitten us yet, at least :)
I'm using AngularJS 1.0.8.
The problem: I have a dynamic website that can be built from various components, or widgets: paragraphs, text blocks, images, hyperlinks, and tables, for that matter.
A paragraph is a container of more components. A table is also a kind of a container - it can hold other components, and it arranges them as a datagrid.
The website is not static, i.e. I don't have a pre-defined layout of such components.
Instead, I get a JSON in startup, that specifies the layout of the components.
Originally, I had a directive of each such component, using templates for that directives, and occasionally using $compile to change the DOM a bit for more complex components.
For the 'container' components - paragraphs and tables - I used ngRepeat to render all of the components that are contained in that container-component.
That was problematic performance-wise. It would take the website many seconds to load on Chrome/Firefox, with the time spent mainly in the AngularJS render mechanism (not in IO, I figured).
So I decided to change the directives of these components. Instead of using ngRepeat, which is not really necessary since I don't need the two-way binding (the content in the website is not interactive and cannot be changed, so really I only need to render it once, very much like a servlet) - I built the HTML string in the directive myself, using plain JS, iterating over all of the contained components that exist in the model, and at the end I $compiled and linked it.
The result wasn't good enough again.
For a table of a few hundered cells, it took ~500 milis to link in modern Chrome/Firefox, and ~4000 milis in IE9, and ~15000 milis in IE8, and IE7 is still rendering so I can't give you the time :)
I thought that the problem might be with an extensive use of directives.
A simple:
<div my-table-component data="data"></div>
element would result, after the link, in a <table> tag with 30-40 <tr> tags, each with 10 <td> tags, and in each there would be an additional <div my-text-component> or <div my-image-component> that would then have to be compiled and linked by itself (since it has a directive).
I though that since my website is not interactive to begin with, I don't really need this.
Maybe I could avoid using directives for each component, and leave only a directive for the container-components. In these directives, I would create the actual HTML template of every possible other component, instead of using directives that would do that.
That takes me another step away from the AngularJS idea towards a servlet idea. And it kind of sucks.
So maybe one of you can offer a better approach for me... Maybe the performance problem is not even there? Maybe a use of directives (and hopefully ngRepeat) can be fine performance-wise even with this amount of items? Maybe there's a better way to make an insightful performance benchmark, other than using Chrome's Developer Tools, Firebug, and Chrome's Batarang AngularJS extension (none of them really directed me in a productive way).
Using a lot of nested directives by itself is not a problem, but any extensive binding could have huge impacts.
If someone is still looking for an aswer to this, using Angular 1.3+, OP could solve his problem by first using one-time binding on all the elements on which he says there is "no need for two-ways bindings", using the ::binding syntax.
In addition, I would suggest trying to spot which bindings exactly are being particularly slow, using the amazing profiling snippets from this website: http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html
Finally, what often takes most time in Angular, especially while building big ng-repeated tables, is the compilation phase. So if possible try to only build a restricted number of elements (using limitTo) and then load more as the user scrolls for instance. Many directives address this concern (look for "infinite scrolling")
All in all, I think it is still worth trying to optimize an Angular application rather tham switching to native JS, most of the time the lag comes from a developper mistake: some applications have thousands of watchers and run pretty smoothly (*cough* like mine *cough*).
I am new to backbone, and I'm here to ask for a little bit of help understanding how I would go about building my current webapp project. I'm developing a modular administration panel for servers. Every single "page" of the panel should be a packaged "module" including controllers, models and views.
The panel will consist of a main layout view being loaded initially, with a basic navigation. When a user clicks on a link on the navigation, a page gets loaded via AJAX into the layout.
(And if this sounds stupid / there is a reason not to do so please tell me :) )
Since others will develop these pages too, and since they are modular, I won't know what models, views and controllers I will be presented with inside the page i load via AJAX.
How would I best go about doing this with backbone?
I'm especially wondering about how I would extend Backbone models etc. dynamically, and how I would manage (for example) the user leaving the page and / or revisiting it later.
Does Backbone provide something I can work with, will I need to hack myself something together, is there a better way of doing things I am missing?
Your thinking around the problems sounds very correct. Make your UI components self contained as possible. Watch this 10 min video to get some more information on UI component best practices.
If you are interested about other important concerns of JavaScript application development, look at BoilerplateJS reference architecture which I published to share my experiences. That contains a similar sample application as you described (menu with component activation).
my recommendations for your UI component activation, deactivation are:
Do not remove/create DOM components. Reuse with hide/show, as your elements will recide in memory even after removing from DOM
Minimize keeping 'state' information on client side. When an user revisit the component, refresh it with a server call and then make it visible (use server as the single truth of state information).
See BoilerplateJS sample component implementations for more details. I know few who use it with BackboneJS (currently it ships with knockoutJS). We will ship a example of it using BackboneJS in v0.2 which is due in a week.
A common modular script loading framework that is used in conjunction with Backbone would be require.js. It might be what you're looking for. Require.js is all about AMD modules, asynchronous modules. Usually each model, collection, view is it's own module that defines the dependencies that particular module needs then loads those modules as needed. It's particularly well suited for large projects where you have lots of individual pieces that need to be mish-mashed together at different points of your application.
You could of course combine multiple backbone elements in a single module (usually I reserve this for Views and specific subviews that would only be used with the parent view) but it's really up to you.
With Backbone, usually the intent is to create single page applications - meaning all the page scaffolding is usually wrapped up as a single file and completely loaded onto the client-side at the get go. The data for each page is then called via ajax and populated as the user navigates and loads different aspects of the application. Is this what you intended in your description?
If you're looking to load different pages that are each individually grabbed form the server, then I'm not sure Backbone is the answer. There are other server-side MVC frameworks that help to accomplish that.
That generally touches on how Backbone is used for this sort of thing.
As for how to extend Backbone models and such, Backbone uses Underscore as a dependency and underscore provides a nice _.extend() function that can easily extend all your objects in pretty much any way you desire. Overriding default functionality, throwing in mixins, it's all pretty painless as far as Backbone goes. As a framework, Backbone is very agreeable when it comes to altering, modifying and customizing every little bit and piece.
As for handling users visiting and revisiting pages, Backbone.router allows you to create URLs that not only point to specific "pages" in your app but also to execute arbitrary code that needs to be executed to get there. Something like a logged in user visiting "mysite/#account" would trigger the router to load certain scripts that bring up that particular view as well as perhaps fetch() necessary data to get that view up and running for the user.
I'm not sure if there are resources out there that give you some kind of basic structure to start with. Most experiences I know of tend to go through the basic tutorials like "Todo List" and work their way up from there. I'm not sure what your experience level is with javascript or programming in general but I started with Backbone AND require when I knew really pretty much nothing. Only a vague notion of what JSON was and a low level understanding of HTTP as in, "it's that thing that gets web pages." That said, I think Backbone was really easy to get for me to start with and it's deepened my knowledge a lot about the whole client-side RESTful type app structure.
There is a really good list out there of the "Todo List" app in many different flavors such as Backbone and Knockout and some others. When deciding on a framework, I basically went through that code comparing all the different frameworks available and selected Backbone because it just seemed to make the most sense to me. I don't regret it. It's a lot of fun and I think the best way to get into it is to just try some demo tutorials.
Take a look at Marionette or Chaplin. Both are build on top of Backbone and provide a structured way to build larger application with Backbone.
Here is tutorial to organize your application as modules using backbonejs
http://backbonetutorials.com/organizing-backbone-using-modules/
I want to know how is the Mozenda Screen Scraper coded?
http://www.mozenda.com/screen-scraper
I shows a browser where user can select the fields he wants to scrap and it creates a crawl script out of it.
The crawl script generation part is clear to me, I want to know does it record the user actions which the user is doing in the browser.
I want to do something similar using C#.
I guess they run something like iMacros on the backend. I even noticed the iMacros browser icon in some of their screenshots ;-)
If you want to code something like this yourself in C#, the IE webbrowser control is the best starting point!
#yc08m, I can tell you for sure that they are not using iMacros. It is all coded with their own proprietary code.
I realize this is an extremely outdated post, but they seem to rely heavily on XPath, so first things first you would need to load the page into an object that you can query. I'd recommend using something like Html Agility pack to accomplish this.