PN
Pranjal Nadhani
@pranjalnadhani
Optimising webpages for product experimentation in React
Submitted Jun 30, 2018
Section:
Flash talk
Technical level:
Intermediate
We use Google’s paid Search Engine Marketing and Facebook’s ad-based marketing a lot to make ourselves and our products visible at the most prominent places of the web. This allows us to target a large audience and showing them a webpage describing our products can help us onboard them to our platform, and possibly convince them to try our product.
On using the above said medium, a lot of experimentation is done to know what works and what doesn’t, while educating a potential customer about our product. Nevertheless, these experiments must not compromise the user experience of our websites.
My talk would be based on the practices we have used at UrbanClap to allow multiple ways of experimentation on webpages, without sacrificing the major UX elements of the webpages which include initial page load time, jank-free animations on page scroll, lazy-loading of images, etc.
Outline
This talk would be about how we develop and optimise our webpages for Google’s SEM(Search Engine Marketing) and Facebook Ads using React and Webpack on the frontend, and how we have designed our CMS(Content Management System) at the backend, which powers the various kinds of experimentation that we use for the same.
The major focus topics would be:
-
using React’s Components to make sandboxed UI elements and how we can re-use them,
-
using props and context to correctly render the re-used UI elements with a consistent design,
-
lazy-loading React Components using Webpack, (such that the initial page load time remains consistent even after bloating the page with too much content),
-
creating the structure of the page data in Redux and views in React the right way, to allow templating of UI elements,
-
modelling the page data in the backend with MongoDB as the database,
-
how to do A/B/.../n experimentation in-house
-
how doing all of the above changes the marketing numbers
Requirements
Knowledge about how we develop web apps in React and how Webpack works.
Speaker bio
https://www.linkedin.com/in/pranjalnadhani/
{{ gettext('Login to leave a comment') }}
{{ gettext('Post a comment…') }}{{ errorMsg }}
{{ gettext('No comments posted yet') }}