Sarsis Front-end Web Developers

CASE STUDIES

Rent Bed Bugs Heaters

Background

The client was a manufacturer that sold equipment to pest control service providers. They wanted to market their product, a DIY whole home heater to treat bed bug infestations. Their vision was to build a website for homeowners to rent out the heaters through a network or service providers. A central piece of the website required a Google Maps API integration to allow visitors to find a provider by zip code. The homeowner goes through an eight step workflow to book an appointment. They choose the heater package for the size of their home, pick the service dates, and optionally choose “white glove” service.

The requirement was the website had to be optimized for phones and desktop, and one codebase should work for both. The client did not want to maintain two separate websites. The site had to load quickly. Business logic had to be written to display only the heat packages that each provider offered, since each service provider offered different services.

Bootstrap

Bootstrap

C#/.NET

C#/.NET

Angular 2

Angular 2

HTML

HTML

Technology Challenges

The client already had a web design for both mobile and desktop, and they were drastically different, making it hard to do a responsive site. We worked through each page, and identified visual elements that could be made responsive. For elements that were too different, we used CSS and media queries and detected the width of the browser to show the correct visual element for the screen size.

The site had to load as fast as possible. We chose to write the application in Angular2 as a Single Page Application (also known as SPA App). Using this technology, the entire application was loaded as javascript to the visitor’s browser. As the visitor navigates to a new page, the content is rendered instantly because it is already preloaded on the client browser. This saves a round trip to the web server, and is a great user experience for the visitor.

It took several rounds of optimization to achieve the page load times we desired. The problem with Angular2 is that the site is slow to load the first page, as the entire site is downloaded to the browser. First we tried bundling the application into just two javascript files. That helped reduce the load time a bit, but the javascript still had to be compiled JIT (just in time) before rendering on the browser. We proceeded to AoT (ahead of time) compilation, which precompiled the site into a single, ready to display javascript file. This substantially reduced the load time, but we wanted to do even better. We reordered scripts in the index.html page, so that the important scripts loaded first. We also analyzed the larger CSS files that the browser could not download asynchronously, and put those at the end.

Google Map API

Google Map API

Entity Framework

Entity Framework

Azure DB

Azure DB

Javascript

Javascript

A True Cloud App

This website was developed to run purely on the cloud (PaaS), which the client was enthusiastic about because there are no servers to maintain. We wanted to get completely away from operating systems and virtual machines, since those still required patching and maintenance. Instead, we opted to use Azure’s AppService, which is a web hosting container where we could just drop the website in and it will run.

A Complex, Multi-Tiered Application

• 28 UI components in TypeScript (Angular2)
• 96 RESTful API Endpoint operations
• 150+ CRUD Repository EntityFramework Operations
• 150+ POCO Models
• Azure CloudQueue for backend services

Value Delivered to the Client:

• Developed website in Angular2 for extremely fast load times on all devices
• Decoupled Service Layer to make HTML updates easy without interfering with critical code
• Hosted on Microsoft Azure, so there are no servers nor virtual machines to maintain
• Performed multiple rounds of optimization to reduce page load times to the bare minimum

Results that Meet Design Requirements

It is challenging to build HTML that rigorously conforms to customer design specifications. It’s even harder when the HTML has to be responsive, and load fast on mobile devices. Check out below to see how well our final HTML code matches the original customer’s Photoshop design.

Reflect Windows & Doors

Background

This client started with us as a small online store selling window and door hardware. We worked closely with the business to grow the site to a large, complex site that is profitable and a major source for revenue for the owners.

A Complex Data Migration

We took over the website from a previous vendor that did not have ecommerce capabilities. The site was a database driven catalog, and customers placed an order by filling out a form. We were given a couple spreadsheets with the products exported from a proprietary database. There was no consistent structure, so the data required sanitizing before it could be imported into our system. We wrote a script that analyzed various fields in each row to group the product variations together into a base product.

Bootstrap

Bootstrap

C#/.NET

C#/.NET

Amazon Web Services

Amazon Web Services

HTML

HTML

Using Queues to Upload Product Images

The client regularly uploaded hundreds of product images through the web based admin portal. The product images had to be resized and cropped to be web ready. The existing system had a process that resized the images directly on the web server. This caused performance issues for customers on the website when the resize task used up all the web server’s resources. We deployed several cloud based services to address this issue: Amazon’s SQS Queue, S3 Storage, and Microsoft Azure’s WebJobs. All the resource intensive work was offloaded away from the web server. With this new architecture, the the web server’s only job is to upload the images to an S3 storage bucket. The S3 bucket is configured to insert a message to the queue when an image is written to it. An Azure WebJob, which is just a continuously running program on the cloud, monitors the queue. When it sees a message, it resizes the image, and stores it into a final resting place on a content delivery network.

Challenging UX Implementation

The online store sold products with varying schemas for each product. A unified template for all products was not possible, so we had to design a highly customized product page that optimally displayed each product on all devices, including phones, tablets, and desktop.

The design called for a unique, responsive menu system that optimized organizing products that were drastically different from each other. Some menu items were text, while others had an image. This also needed to translate to a clean, easy to navigate mobile menu. We built a custom CSS menu based on the bootstrap framework that met the client’s complex specifications.

Amazon S3

Amazon S3

Entity Framework

Entity Framework

Azure DB

Azure DB

Javascript

Javascript

ASP.NET

ASP.NET

CSS3

CSS3

Custom CMS Tools

Due to the complexity of the site, we built custom CMS (Content Management System) tools to enable the business owner to effectively manage their site. We built a tool to streamline the process of importing products to the site, and automatically refresh the cache behind the scenes.

Multiple Currency Processing

The business straddled the United States and Canada, and they wanted a local, feel-at-home experience for the customers on both sides of the border. A requirement was that customers should be able to checkout in their local currency. We developed a custom checkout process that integrated with two separate merchant accounts, one processing the Canadian Dollar, and the other the US Dollar. The website used the customer’s IP address to automatically show prices in their local currency. When they check out, the ecommerce platform automatically sends the transaction to the local payment gateway. We expanded this functionality to PayPal orders as well, so that PayPal also processes in the correct currency. This was a significant win for the client, because it allowed the Canadian company to expand to the United States and quadruple its business.

Value Delivered to the Client:

• Handled a complex migration of thousands of SKUs from a legacy catalog into a well structured database
• Built a sophisticated front end that was optimized to make it easy for customers to find products by using a custom made navigation menu and product layout pages.
• Multi-national Currency processing allowed the company to break into the US market ahead of its competitors.
• Utilized Queues to offload backend work away from the web server to avoid needing to purchase additional hardware.

Integrity from Comps to HTML

It is challenging to build HTML that rigorously conforms to customer design specifications. It’s even harder when the HTML has to be responsive, and load fast on mobile devices. Check out below to see how well our final HTML code matches the original customer’s Photoshop design.

Mapptrap

Developing an Administration Dashboard

“It felt like we were working with our own team, not an outsource agency” – Barry Solomon, CTO

Scenario: A client already had mockups for a dashboard, but needed to outsource the development because their in-house team did not have extra capacity to take on more work.

We were tasked with taking the mockup, and turning it into a clickable, responsive front end, and building a skeleton REST WebAPI service layer that passes mock data to the drive the UI. The in-house team would then integrate their business logic into the scaffolded API to complete the application.

This strategy was efficient because it lets the client’s in-house developers focus on their proprietary business logic, while offloading the general front-end development to an agency.

Highlights:

• 26 Data Driven Pages
• Delivered in 4 weeks
• Formal Code Review with Client
• Fully supported in-house team

Bootstrap
C#/.NET
CSS3
HTML

Building Trust

The biggest win for the client was Sarsis’ close support with the in-house dev team. “It felt like we were working with our own team, not an outsource agency”. Even though the client was a thousand miles away, we collaborated via screen sharing sessions to transfer our knowledge and expertise, and worked as a team to get their legacy code integrated into the new application we built.

The client benefited from both the flexibility of on-demand consulting, and the casual working relationship of an in-house team working on the same roof.

Sarsis continues to provide consulting services to MappTrap.

NodeJS
Angular 4
RESTful API
Javascript

Integrity from Comps to HTML

It is challenging to build HTML that rigorously conforms to customer design specifications. It’s even harder when the HTML has to be responsive, and load fast on mobile devices. Check out below to see how well our final HTML code matches the original customer’s Photoshop design.