JSFoo 2014

JavaScript as the centerpiece of a complex web stack

Managing API Resources and Their Relationships on the Front-end

Submitted by Himanshu Kapoor (@fleonus) on Wednesday, 6 August 2014

videocam_off

Technical level

Intermediate

Section

Full talk

Status

Confirmed & Scheduled

View proposal in schedule

Vote on this proposal

Login to vote

Total votes:  +16

Objective

With the advent of Single Page Apps, a lot has changed in the world of web development. The days of server-side rendering are waning away, and the world is moving towards static HTML apps that communicate with a back-end API to drive the user experience.

Such transformation requires rapid communication between the Single Page App (front-end) and an API (back-end). This exchange of information brings about various challenges like maintaining consistency, optimizing for performance and scalability.

This talk would go over the challenges, we at Wingify, faced while making our Angular.js based Single Page App – Visual Website Optimizer. One of the core challenges is efficiently communicating with a back-end service. Finally, the talk would conclude with the solutions we came up with to tackle these problems.

Description

This talk would detail problems faced with the seemingly trivial task of using Angular.js, to get and post data from a back-end API. I would go over these problems (questions) one by one, and propose a solution to them by providing relevant examples. These questions include:

  • Fetching data from the server is as easy as making an AJAX request, but as the app logic becomes complex, how do you avoid making your codebase a tangled mess of AJAX requests?
  • How do you ensure that multiple instances of the same resource are updated as soon as the resource is updated with the most up-to-date data, effectively maintaining a single source of truth across the app?
  • How do you handle relationships between two resources? Fetching a resource could require fetching another child or related resource simultaneously; how would you go about instructing the app to do so?
  • If you send a request to get something, how do you effectively cache its response so that you don’t have to send a request to fetch that resource again? How do you make sure that this storage mechanism performs well enough to return resources and sub-resources as quickly as possible?
  • An app would involve several instances where the user inputs data that is posted to the server. How do you ensure only what the user changed is posted to the server, effectively making the payload as small as possible?
  • The server might have its constraints when accepting data from the client. It could need some transformation before accepting a response. How would you serialize and transform this data before sending it to the server and still maintain consistency across the app?
  • Similarly, such transformation might be necessary before receiving the response from the server. How do you make sure that request serialization and response unserialization works consistently?

The challenges listed above are based on real world problems we faced while developing version 3.0 of our website optimization software – Visual Website Optimizer. While solving some of the problems above, we abstracted out a lot of solutions to these problems into a service for Angular.js.

Requirements

Intermediate knowledge of JavaScript. Experience with Angular.js desirable but not necessary.

Speaker bio

Himanshu is a front-end engineer at Wingify. He has been working with JavaScript for the past 5 years, and has done several projects based on front-end frameworks like Backbone, Ember.js and most recently Angular.js. His role at Wingify involves solving challenges related to data visualization, communication and performance optimization on the front-end.

Slides

http://www.slideshare.net/wingify_engineering/resources-and-relationships-at-frontend

Comments

  • 1
    Amanpreet singh (@amansx) 4 years ago

    Sounds a lot like Ember-Data tailored for angular. Would be quite interesting to know how they built a system this complex yet elegant.

  • 1
    Sreekandh Balakrishnan (@sreekandh) 4 years ago

    @Harish, @kiran, Can you please paste in your comments here please.

    @himanshu, It will be awesome structure the talk in such a way that folks who attend can take away the learning from your session and implement in their project.

    Based on your current proposal please do prepare a slide deck with relevant points ( draft slide is fine). Based on this we will setup our next call.

  • 1
    Himanshu Kapoor (@fleonus) Proposer 4 years ago

    I have prepared a draft presentation and attached here. It should give you a general direction the lecture will go forward in and make you familiar with the problem statements and the solutions to them. In the final version, I plan to accompany each problem statement with one or more relevant examples from VWO or other generic examples that the audience can follow.

Login with Twitter or Google to leave a comment