TOAST UI

In web development, HTML forms the basic skeletal structure, and CSS decides how the markup language will be presented. Both are closely related to service performance and accessibility. In other words, both HTML and CSS must be written well in order for all browsers to fully express the contents without significant loss. This guide serves to help developers write consistent codes to facilitate cooperation and to minimize maintenance and expansion cost.

Coding convention is a collection of rules set in place to ensure readability and manageability of codes. Especially because JavaScript is more flexible in terms of syntax (dynamic type, binding this, native object manipulation etc.), without a mutually agreed upon rules among developers, it will be near impossible to understand or to debug other's codes. Abiding by the coding convention increases readability and decreases chances of errors or bugs that might affect the performance of the program. For bigger projects, it is much more cost-efficient and reasonable to follow the coding conventions.

Anti-pattern is a set of patterns many developers habitually use, but is rejected for the sake of performance, debugging, maintenance, and readability. This document explains each anti-pattern with examples and provide suggestions for improvement.

JavaScript, compared to other languages, has a more flexible syntax. Such characteristic sometimes causes unintended problems. For example, the flexible syntax creates accidental errors that are not, from syntactical perspective, bugs, and also leads to codes of which purpose is not transparent. Because JavaScript does not have a compile stage, such errors are undetectable before actually running the program. While adhering to the Coding Convention to increase readability and prevents anti-patterns is a temporary solution, it is still difficult for developers to ensure that they are following the Coding Convention by themselves. In order to compensate for the JavaScript’s shortcoming, Static Analysis is used to automatically validate the Coding Convention and sniff out possible errors.

Application performance optimization is important on both levels of the web and the application itself. Modern web applications have become very large and dense with features including Ajax communications and complex UI. Heavier webs eventually lead to longer loading time and negatively affect the User Experience (UX). Pinterest, for example, had high rates of users leaving the page due to long loading time, and through performance optimization, decreased the bounce rate and increased the revenue by 40%. As the performance is clearly and directly linked to profit, it is critical to optimize the web application’s performance. This guide serves to provide the readers with basic background knowledge of performance optimization, and to introduce various optimization methods by discussing the webpage loading and rendering stages separately.

Debugging is a process of tracking down the cause of an error and correcting it. For JavaScript, a language that spans various platforms, different debugging tools exist for different platforms, and each tool operates differently, giving the impression that “JavaScript debugging is difficult.” However, the fact of the matter is that JavaScript tools have come a long way, and developer tools found in modern browsers provide features and UI designed to facilitate the debugging process. This guide will mainly be based on Chrome Developer Tools (Chrome DevTools,) the most widely used debugging tool, but will also explain Internet Explorer (IE) debugging tools (F12 Tools) as well.

JavaScript was created to quickly validate the user input without the server communication. Although the first lines of JavaScript were distributed as means for simple tasks, recently, JavaScript has evolved into one of the major web development tools in the modern era. As JavaScript functionalities increased, the codes grew longer and more complicated. Granted, it was only natural for codes to be grouped together and separated according to the functionalities, but it resulted in a complex and dependent relationship as presented in the image below.

Module is an idea that cannot be taken for granted when discussing the modern JavaScript. As JavaScript files became modularized according to functionality, the bundler, a tool used to group and manage these modules, became increasingly important. Bundlers can be used to modularly program source codes and easily manage intermodular or external library dependency. This guide explains the JavaScript development through webpack.

In the recent years, JavaScript has been widening the scope of use through rapid development, and the application standards put forth by the front-end environment are growing in complexity every day. Furthermore, testing environment also went through spectacular changes in disproportionate amount of time, and with the rise of Node.js, numerous testing tools have innundated the market and continue to undergo massive evolutions. Front end tests must consider different environments of users (browser, device, operating system, and etc,) so there are plenty of variables to take into account. For this reason, it is critical that developers understand the different tools and environments related to JavaScript testing, and a veteran expertise is required to design strategical tests customized to different projects.

CodeSnippet is a collection of frequently used codes like codes to perform type checks or to manage arrays, and was created to decrease the dependence on the outside libraries. TOAST UI uses CodeSnippet for the very same reason. CodeSnippet is separated into multiple modules according to its function, so developers can decide whether to use CodeSnippet as a whole or simply adopt the parts needed. However, it is advised that CodeSnippet be used as a whole when used to maintain TOAST UI components.

ECMAScript (ES in ES5 and ES2015 is abbreviation of ECMAScript) is a general purpose scripting language specification standardized set by ECMA-262 of ECMA International. The first build of ECMAScript was distributed in 1997, and it took them 12 years to get to the distribution of widely used ES5 in 2009. Six years later, ECMA International released the sixth build, ECMAScript 2015, not ECMAScript 6 (from here on out ES6) as naturally predicted. Previously it took them longer to publish each build, but in order to make the language more suitable to the fast-changing environment that is programming, it was published with the published year as a part of the name instead of the version number.

jQuery is a JavaScript library that provides necessary APIs to easily deal with cross browsing issues in a fragmented browser environment. It was first released in 2006 by John Resig, and since then, it has been the most popular JavaScript library on the web. However, since developers can work with DOM and Ajax requests with the standard APIs now, and because the gap among different browsers is closing, jQuery is slowly fading into history. Also, with the recent rise of single-page applications (SPA), most of jQuery’s roles have been replaced with frameworks like React and Vue. Meanwhile, if SPAs are unnecessary or if building with the intention of support older browsers, jQuery is still extremely useful, and allows developers to write concise and effective cross-browser codes.