Server Rendered Product Page

I was part of the team developing the front-end for the next evolution of TI's product pages, based on a modern decoupled service oriented architecture.

This was a large project requiring close collaboration with the back-end team as well as our UX Design team.

With TI's portfolio of 80,000+ products, each with its own associated specifications, training materials, primary and secondary associated parts, the complexity of upgrading the Product Web pages to a newer architecture and implementation of the UI/UX from a tabbed to a single page experience was a challenging and large undertaking involving different stakeholders and teams.

View an example page: here

Tabbed Product Folders before

Singe page experience after

Requirements

• Localization for Chinese and Japanese
• Metrics tracking (Google Analytics)
• Must conform to Search engine optimization
• Meet TI branding and guidelines
• Reusable web components
• Applied business logic requirements
• Integrated unit tests
• Supported by IE11, Firefox and Chrome

Contributions

• Construct initial templates in Thymeleaf, organizing reusable fragments
• Build out base HTML connected to JSON data from services provided by another team
• Write integration tests using JSOUP and JUnit
• Contributed to 8 patterns/web components providing SASS for shadow DOM and slotted light DOM elements adhering to company brand and style guide

Example of work

Implementation of Sticky Chapter Nav

• Animates into view when sticky is activated
• Works with IE11
• Slotted content at top to satisfy content requirements
• Matches UI Comps
• Scrolls to anchor position on link click
• Top link appears on sticky

View live: here

Challenges

Web Component race conditions I encountered a race condition as I was tasked to fix a bug that caused the sticky chapter-nav to not populate with all of its chapter nav links correctly.

Isolating the issue

Using Chrome Dev Tools with a throttled network and breaking on the render code for the web component, I could isolate the moment Chapter-Nav was finding chapter-nav-anchors on the page and populating them as links in the sticky-nav. I could determine that the chapter-nav-anchor did not exist in the DOM when the chapter-nav is rendered given the asynchronous nature of how StencilJS web components are rendered/hydrated as the DOM is completing its page load.

Essentially the Chapter-Nav web component was querying for the Chapter-Nav-Anchors (positioned on the page to indicate where the anchors are), but during slow loads the Chapter-nav would render first before the Chapter-Nav-Anchors is on the DOM causing the Chapter-nav to fail in populating the link.

Solution

The solution we ended up implementing after going back and forth with my colleagues was to listen for the document page load event during the its component lifecycle when it finished loading ensuring that both it and the DOM has completely rendered before looking for the chapter nav anchors.