Ting Hsuan Lin | September 27, 2016
Internet is a concept that has been studied from the 50s of last century only becomes popular when Tim Berners-Lee invented the World Wide Web concept early 1990. Since then so far, the evolution of the web has far exceeded a great deal compared to the time it was born. One of the web’s huge progress is Single web Page Application (SWPA)
Internet is a concept that has been studied since the 50s of last century but only becomes popular when Tim Berners-Lee invented the World Wide Web concept in the 1990s. Since then so far, the evolution of the web has far exceeded a great deal compared to the time it was born. One of the web’s huge progress is Single web Page Application (SWPA).
If such a traditional Website is a collection of text documents and other resources, linked by hyperlinks and URLs, the SWPA aims for a user experience which is similar to using the application on Windows. At that time, users used the website in the browser without having to switch links, but they still had full of content and interactive capabilities as traditional sites. Some typical applications we can name here: Google Docs SWPA, Google Spreadsheets, Chrome Extensions Store, Gmail …
In this article, the writer would like to share technology and research use as well as difficulties encountered when deploying SWPA e-commerce floor www.sendo.vn
In Vietnam, as other countries in the world, jQuery library is popular because of it’s small capacity, easy-to-use syntax, many plugins as well as strongly supported by the community. Besides, we should also take into account other competitors such as Mootools, Dojo or YUI …
Recently, a number of new projects focused on supporting developers, who are not neccesarily having deep knowledge in architect of HTML or CSS, to create Web sites with content, complex features, compatible with all devices. These projects provide ready components such as form of login / register, date cell or even complex graphs tables … Programmers are just re-assembled components together to become a complete website. Some typical projects as polymer-project.org, material-ui.com …
Since most professional display processing task is performed at the Client Side, the Server Side SWPA system merely retrieves the necessary data. For that reason, it is lightly loaded comparing to traditional website system, which retrieves the entire contents displayed when users query a new page.
With such specialties, SWPA system will design Server Side direction of API- equipped, to be jointly used for the Mobile Application, which saves a lot of resources and maintenance cost.
Moreover, the data communication between a client-server system is normally JSON or XML , which usually have much smaller capacities than HTML sites of traditional website, therefore it is highly economic in terms of page loading speed and bandwidth.
Because of characteristic which is similar to Client Side, some applications SWPA capable of running on the user’s browser without internet connection or server. With HTML5 technology, programmers can store data on the Local Storage and customization application even when losing internet connection.
Obstacles when implementing SWPA
Setting aside obstacles as new technology or how to design different from the traditional system, SWPA met two biggest obstacles were managing browser history (browser history) and optimizing Search Engine Optimization (SEO)
For traditional websites, while turning pages and the URL on the browser window changes corresponding to the content simultaneously, users can easily return to the previous web using the Backspace button. It is not such an easy task for pages using SWPA. Most sites SWPA will not change path when users add new content to load, and users can not manage access history or share corresponding link with current view of the site.
Fortunately, the invention of HTML5 technology has solved these problems of programmers. With features like pushState, popstate … programmers are able to actively change url users without reloading pages and easily manage web browser history.
As an eCommerce marketplaces, Sendo.vn depends a great deal on traffic from search engines, so it deploys SWPA but still places top priority on optimizing SEO for web .
To address this challenge, Sendo.vn splited user manipulation stream and Crawler Bot users into two independent streams but keep interface and experience intact. This means that if the user stood a page turn to page X is Y will experience if SWPA also go directly to the user or Crawler Bot Y will receive the content that appears similar to the experience in SWPA.
Implemeting following this direction will encounter the problem of two templates Server Side and Client Side coexist for the same features, leading to difficulty in scaling as well as maintaining source code. In this situation Sendo.vn used Smarty template library to use simultaneously in Client Side and Server Side.
Thus, implemeting SWPA is quite an easy task if there is carefully prepared system architect and structural applications architecture. Applying SWPA into products not only brings new experience and convenience for users, but also enhance system performance, and save the bandwidth.
AUTHOR [email protected]