SharePoint Website: The pursuit of agile application development

In the last piece, we saw how to speed up the development of visual components using the content editor web part with HTML5, CSS3, Bootstrap and JavaScript while avoiding the resultant downtime from frequent updates which are part and parcel of any design development project. The Next step was to move to JQuery as it made our code concise and easy to manage, it gave us a more powerful wrapper for AJAX, which we used to access data in SharePoint lists via it’s REST APIs, this was the point where we made the leap from mere front-end development to application development, all with the help of a few lines of code in plain old text files.

Angular JS with its single page application was a perfect fit for us because it was light weight and worked like a charm within Microsoft SharePoint.

Using AJAX to pull information from SharePoint lists made everything very user-friendly, we were able to access information from SharePoint's lists, which was a big improvement since our users didn’t need to update the 'text files' at the back, but they could make changes to the content in the lists and see the results immediately. In case we required two-way data binding between the UI and our application logic and more functionality and play within the visual component, we moved on to Angular JS.

How do we make applications faster? Better? 

With a typical requirement of displaying a bunch of data on the screen, let the user search and filter through it dynamically. 

Traditional approach would be

Development

• Develop, Build solution, move the WSP & deploy web-part 

Processing

• If the complete data set is too large, the page can take a lot of time to load initially, AJAX can speed up this time 
• Upon a search/filter query, a server trip would return the filtered result 
• Upon each press of the search button, a resulting server trips adds delays and results in more processing to be done at the back end

Maintenance

• Any change to the application would mean development – retract and deploy with downtime

The same example with a single page application (SPA) using Angular JS would mean:

Development

• Develop on text file – plug into any content editor

Processing

• The page loads up while the AJAX call is busy in fetching the latest data, put up a loading gif while he waits for data 
• The user can use a variety of filters, search queries and see their request updated in real-time on the client’s browser. No server trip, no wait time, no frustration.

Maintenance

• Any change to the application would mean changes to the text files meaning no downtime for updating the application.

Two-way data processing

Gathering information from users on a form works just as well as getting data from a SharePoint list and displaying it on the page. Angular JS with its powerful client-side validations and processing can mean improved UI/UX along with the incredible maintenance aspect which was the goal all along.