FRONT-END & BACK-END DEVELOPMENT

Posted on : by : admin

FRONT-END DEVELOPMENT

In previous sections, the fundaments of web development were briefly covered (HTML, JS, CSS). These items are often referred to as front-end development; front-end referring to items that run in the users browsers and provides the user interface experience. Figure 5 shows the example page.

For optimization and for separation of concerns, the JS and CSS code is typically consolidated into separate external files. This allows the browser to cache the content more effectively. This also separates concerns have the three fundamental aspects of web development in their own maintainable files. For HANDS, the approach is to keep the code together and as close to the area of responsibility as possible. This provides the students a single file to understand the elements and how they interact. Once the students understand this concept, the best practice of separation of individual files can be applied.

BACK-END DEVELOPMENT

Server-side (commonly referred to as back-end) refers to operations that are performed by the server in a client–server relationship. Where the client is the HTML page and the server is a web server that runs on a remote server, reachable from a user’s browser.

Operations are performed server-side because the program requires access to information or functionality that is not available directly to the client, only available on other secure network servers. Server-side operations also include processing and storage of data from the browser to a server. If data is entered on the browser, the JavaScript on the page can call a web service on a server to store the information. This allows for information to be shared among multiple users, provides for scalability (servers have more resources), lightens the work load on the local browser, provides backup and restore abilities of the data, and is more secure.

There are several platforms for creating web applications and web services on the server. For HANDS, we leverage the training system HENS [8] to provide the infrastructure and development tools for writing Node.js and SQLite web applications. Follow the instructions to setup HENS or setup your own Node.js environment. HANDS will run on any Node.js environment. Node.js is an asynchronous event driven framework for server side processing. It is designed to build scalable network applications. With Node.js, web sites and web services can be built that expose data from multiple sources. This provides our frontend applications with information to display. HANDS is a Node.js application.

The high level design is shown in figure 6. As shown, the main application file is app.js. This file is responsible for starting the server and responding to all request. It has a router that will route service calls to an API handler or server the assets. The API services are restful, accepting and replying using JavaScript Object Notation (JSON). All other calls are considered assets or page calls, where HANDS will return the appropriate content. An important concept, is HANDS will process all requests.

If a page requests an HTML, JS, CSS, or image file, HANDS will process the request and stream the file to the user’s browser. For this paper, a simplified version of HANDS is presented. This simplified view is the foundation and must be understood by the reader. A simple front-end page is created to call the backend application which returns JSON data. The full enterprise framework is open source and can be studied in detail [9].

The back-end application is shown in figure 7. In the Node.js code, a server is created and listening on localhost port 8080. When the server receives a request, it looks at the url to determine if it is the API call (/api/v1/teams) or a request for the root site (/); this is an example of a basic router. The router will process the API call and return back a JSON response that has an array with two items. The request for the root page will stream the “index.html” page to the user.

The next step is to create a front-end page to call the backend server. Create a page called “index.html” as shown in figure 8. The page includes a reference to jQuery to simplify the support of AJAX on different browsers. The page has a div placeholder for the data retrieved from the service (“teamlist”). An inline JavaScript section calls the service, builds the html, and injects the html into the “teamlist” div.

The JavaScript in the page can remain inline or get separated out to an external JavaScript file. The approach given, provides the student with a view of all code while the separation may provide some performance optimization. The result of viewing the page in a browser is shown in figure 9. As shown, the Node.js application is running on localhost (127.0.0.1) port 8080. The application’s router processes the request. Since it is the root page, the “index.html” page is streamed to the browser. The browser processes the script tag and calls the API. The Node.js application processes the request and returns back the JSON data with Team A and Team B. The page successfully receives the data and injects the html. The final page lists both teams.

The design of individual pages with content injected using web service APIs is HANDS. This approach leverages the simplicity of HTML and AJAX to create a web application. It avoids the complexity and issues found in single page applications, by having separate pages as HTML originally proposed. It simplifies the pure server delivery approach, by only requesting the data needed for the requested page.

This hybrid approach, provides a simple and clear design for students to study while delivering a framework that is enterprise ready and extensible. The process of adding additional HTML pages, adding APIs, and updating the router continues until a Minimum Viable Product (MVP) is ready. The application is deployed to the web servers and configured. The deployment of Node.js is beyond the scope of this paper and more details can be found on the web [10].

Company Reviews

Leave a Reply

Your email address will not be published. Required fields are marked *