Why choose AngularJS over JQuery for infinite scroll?

Every media and publishing house aims to increase page-views and reduce the bounce rate on its website, ultimately increasing user engagement. One way to accomplish this is through infinite scrolling, also known as “endless scrolling” or “continuous scrolling”—as the user approaches the end of a page, the content for the next page is dynamically appended at the bottom. 

Srijan developed its continuous scroll tool “Sarus” in AngularJS, an open source JavaScript framework. There are numerous reasons why we chose AngularJS and not jQuery for infinite scroll.

Challenges faced with jQuery

jQuery is a cross-platform JavaScript library and the old ninja of multi-browser JavaScript library. It was built to address cross-browser incompatibilities. However, the implementation for all browsers is now heading closer to W3C standards and using jQuery adds a thick layer to the code. It is commonly used for building basic to advanced web applications. However, it could become difficult to maintain once the size of the project increases. 

Moreover, jQuery code architecture limits the usage to just plug-ins. It does not have a template mechanism which is needed to make use of supportive libraries like Mustache. All in all, jQuery is restrictive as a front-end application framework and we wanted more flexibility with the development.

How AngularJS addresses these challenges better

AngularJS is an open-source toolset used to build a framework most suited to your application development. It comes with a Model View ViewModel (MVVM) architecture which makes code management easier. AngularJS  helps in front-end web development, and allows for better code management and architecture.

AngularJS gives a structured framework to organize your code. A good framework can help architect your code so that it is modular (therefore reusable) and provides templating, data-binding and security, besides additional features. Large JavaScript front-end apps require easy code manageability and reusable components, which could be built using custom directives (HTML tags).

Srijan has deployed the front-end application Sarus as a Headless Drupal solution to enable infinite scrolling of SEO-friendly mobile content. Sarus is built with a mobile-first approach, using AngularJS and MongoDB. It consumes RSS feeds from any Open Source CMS/Enterprise CMS and displays them as an infinite scroll. The framework is available for download at GitHub.

Conclusion

While the decision to use AngularJS or jQuery is ultimately case-specific, there are numerous scenarios in which AngularJS would be the preferred technology for infinite scroll. AngularJS would push you to start from the ground up with your architecture in mind. Make sure your requirements mesh well with the points highlighted above. 

That’s our case for choosing AngularJS over jQuery. What technology have you used for infinite scroll?

Also, do check our webinarDeveloping Large Scale Applications in AngularJS and understand AngularJS web applications & project structures.