StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSingle Page Application SEO and infinite scroll AngularJS
text
Body
copied!<p>We are have a site with a feed similar to pinterest and are planning to refactor the jquery soup into something more structured. The two most likely candidates are AngularJS and Backbone+Marionette. The site is user-generated and is mostly consumption-oriented (typical 90/9/1 rule) with the ability for users to like, bookmark, and comment on posts. From the feed we open a lightbox to see more detail about the post with comments, related posts, similar to pinterest. </p> <p>We have used backbone sporadically and are familiar with the idea but put off by the boilerplate. I assume Marionette would help a lot with that but we're open to changing the direction more radically (eg Angular) if it will help in the long term. </p> <p>The requirements:</p> <ul> <li>Initial page must static for SEO reasons. It's important that the framework be able to start with existing content, preferable with little fight.</li> <li>we would prefer to have the data needed for the lightbox loaded already in feed so that the transition can be faster. Some of the data is already there (title, description, photos, num likes/ num bookmarks,num comments) but there is additional data that would be loaded for the detail view - comments, similar posts, who likes this, etc.</li> <li>Changes to the post that happen in the feed or detail lightbox should be reflected in the other with little work (eg, if I like it from the feed, I should see that like and new like count number if I go to the lightbox - or the opposite.)</li> <li>We would like to migrate our mobile site (currently in Sencha Touch) to also use the same code base for the parts that are common so we can have closer feature parity between mobile and main site.</li> </ul> <p>These requirements related to my concerns about Angular:</p> <p>1) Will it be possible/problematic to have initial page loads be static while rending via the templates additional pages. </p> <p>2) is it problematic to have multiple data-sources for different parts of page - eg the main post part comes from embedded json data and from "see more"s in the feed while the additional detail would come from a different ajax call.</p> <p>3) While the two-way binding is cool - I'm concerned it might be a negative in our case because of the number of items being rendered. The number of elements that we need two-way binding is relatively small. Posts like:</p> <ul> <li><a href="https://stackoverflow.com/a/7654856/214545">https://stackoverflow.com/a/7654856/214545</a></li> <li><a href="https://stackoverflow.com/questions/14065050/angular-js-consumes-more-browser-memory">Angular JS ng-repeat consumes more browser memory</a></li> </ul> <p>concern me for our use-case. We can easily have hundreds of posts each with 1-2 dozen details. Can the two-way binding be "disabled" where I have fields/elements that I know won't change? </p> <p>Is it normal/possible to unload elements outside of the view port to same memory? This is also connected to the mobile direction because memory is even more of a concern there. </p> <p>Would AngularJS work/perform well in our use-case? Are there any tricks/tips that would help here?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload