<<

Architectures: Case Studies

Authors: Students in Software Architectures course Computer Science and Computer Engineering Department University of Arkansas May 2014

Table of Contents

Chapter 1 - HTML5 Chapter 2 – XML, XML Schema, XSLT, and XPath Chapter 3 – Design Patterns: Model-View-Controller Chapter 4 – Push Notification Services: and Apple Chapter 5 - Understanding Access Control and Digital Rights Management Chapter 6 – Service-Oriented Architectures, Enterprise Service Bus, Oracle and TIBCO Chapter 7 – Cloud Computing Architecture Chapter 8 – Architecture of SAP and Oracle Chapter 9 – Spatial and Temporal DBMS Extensions Chapter 10 – Multidimensional Chapter 11 – Map-Reduce, Hadoop, HDFS, Hbase, MongoDB, Apache HIVE, and Related Chapter 12 –Business Rules and DROOLS Chapter 13 – Complex Event Processing Chapter 14 – User Modeling Chapter 15 – The Semantic Web Chapter 16 – Linked Data, Ontologies, and DBpedia Chapter 17 – Radio Frequency Identification (RFID) Chapter 18 – Location Aware Applications Chapter 19 – The Architecture of Virtual Worlds Chapter 20 – Ethics of Big Data Chapter 21 – How Hardware Has Altered Software Architecture SOFTWARE ARCHITECTURES

Chapter 1 – HTML5 Anh Au

Summary In this chapter, we cover HTML5 and the specifications of HTML5. HTML takes a major part in defining the Web platform. We will cover high level concepts, the history of HTML, and famous HTML implementations. This chapter also covers how this system fits into a larger application architecture. Lastly, we will go over the high level architecture of HTML5 and cover HTML5 structures and technologies.

Introduction

High level concepts – what is the basic functionality of this system HyperText Markup Language (HTML) is the markup language used by to create, interpret, and annotate hypertext documents on any platform. HTML5 is the fifth and latest standard for HTML. It is enhanced to provide multimedia and interactive content without needing additional plug-ins.1 The current version more easily and effectively supports the creation of web applications that are able to work with the user, the user’s local data, and server.

Glossary  CERN European Organization for Nuclear Research  CSS Cascading Style Sheets A style sheet language used for describing the look and formatting of a document written in a markup language  DOM Document Object Model A cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents  DTD Document Type Definition A set of markup declarations that define a document type for an SGML-family markup language  GPU Graphics Processing Unit  HyperText Text displayed on a computer display with hyperlinks to other text which the reader can immediately access  IETF Internet Engineering Task Force Develops and promotes Internet standards  Internet A global system of interconnected computer networks that use the standard Internet protocol suite to link several billion devices worldwide  JS JavaScript The scripting language of the Web  Markup Modern system for annotating a document in a way that is language syntactically distinguishable from the text  PHP PHP: Hypertext Preprocessor

1 SOFTWARE ARCHITECTURES

A server-side scripting language designed for web development  RTC Real-Time Communication  SGML Standard Generalized Markup Language Used for defining generalized markup languages for documents  W3C World Wide Web Consortium The main international standards organization for the World Wide Web  WHATWG Web Hypertext Application Technology Working Group A community of people interested in evolving HTML  XHTM L Extensible HyperText Markup Language A family of XML markup languages that extends versions of HTML  XML Extensible Markup Language A markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable

2 SOFTWARE ARCHITECTURES

History Although the origin of the Internet began around the 1960s, the field of academia began to utilize the Internet in the 1980s. Progressing into the 1990s, the increasing popularity of the Internet had created an impact on cultures and businesses everywhere.

CERN researchers were looking for a system that would the central location where documents could be created and shared. The idea came to be ENQUIRE in 1980. In 1989, physicist and CERN contractor Tim Berners-Lee incorporated the ever-growing Internet into the ENQUIRE system. He suggested a hypertext system that would use hyperlinks connecting to the Internet. By late 1990, Berners-Lee created HTML and the browser and server software. 2

Figure 1. ENQUIRE Proposal9

In late 1991, Berners-Lee first publicly defined HTML on the Internet. At the time, HTML contained only 18 elements. He stated that HTML was an application of the Standard Generalized Markup Language (SGML). Several concepts were borrowed from SGML such as element types formatting with a start tag, content, and an end tag, element attributes, character references, and comments.

Figure 2a. Sample SGML markup 10 Figure 2b. Sample HTML markup 12

3 SOFTWARE ARCHITECTURES

Because of the widespread usage of HTML, an IETF working group was formed to develop IETF specifications for HTML. In 1995, HTML 2.0 was released as the suggested standard for future HTML uses. The HTML 2.0 specification formalized HTML capabilities and introduced new features like form-based file upload, tables, client-side image maps, and internationalization. 3

Figure 3. Sample of HTML 2.0 13

HTML 3.0 was drafted and proposed in April 1995. The HTML 3.0 proposal expired without approval from the IETF. The increase in web browser development contributed to the failure of the HTML 3.0 proposal. 22 Since the IETF working group for HTML 2.0 closed in September 1996, HTML 3.2 was released by W3C in January 1997. Features that were added in HTML 3.2 specification were tables, applets, and text flow around images. Mathematical formulas were purposely not included in this version. 23

Figure 4. Sample of HTML 3.2 11

4 SOFTWARE ARCHITECTURES

In December 1997, HTML 4.0 was released as a W3C recommendation. HTML 4.0 featured more multimedia options, scripting languages, style sheets, and documents were made to be more accessible to users with disabilities. This version began specifying declarations that were to be included at the beginning of each HTML document. This declaration is an instruction for the web browser indicating which version of HTML the page is written in. The three document type definitions were strict, transitional, and frameset. Users were recommended to use the Strict DTD whenever possible since the Strict DTD excluded presentation attributes and elements, but users could use the Transitional DTD when support for the presentation attributes and elements were required. The Frameset DTD was similar to the Transitional DTD except that the “FRAMESET” element was used in place of the “BODY” element. 24 The subversion HTML 4.01 was released in 1999. Some errata were changes to the DTDs, new style sheets, document scripts, and global structure of a HTML document. 25

Figure 5. Sample of HTML 4.01

In 2004, the Web Hypertext Application Technology Working Group (WHATWG) began developing HTML5. With the collaboration with the W3C, HTML5 was completed in 2008. 1 HTML5 was designed to replace HTML4, XHTML, and the HTML Dom Level 2. New features included new elements, new attributes, full CSS4 support, video and audio, 2D/3D graphics, local storage, local SQL , and web applications. HTML5 is also cross-platform.

Figure 6. HTML5 is designed to be supported on PCs, tablets, and smartphones 16

5 SOFTWARE ARCHITECTURES

Famous system implementations Since every browser vendor provides HTML5 support and HTML5 has become the only truly cross-platform application environment, there are billions of examples of HTML. Open source blogging tools, such as WordPress, are an example of HTML implementations. In conjunction with CSS and PHP, WordPress themes and posts use these languages to change the aesthetics and functionality of a WordPress website. In 2011, Facebook had two focuses - HTML5 and mobile. Facebook’s Chief Technology Officer, Bret Taylor, saw the two focuses as very interrelated concepts. Taylor claimed HTML5 as the future of mobile. Since it was ideal to keep Facebook consistent on desktop site and on mobile, Facebook took after the HTML5 trend. There were even internal teams devoted to creating HTML5 Facebook games! 5 RuneScape, one of the most famous massively multiplayer online role-playing games, developed an HTML5 version in 2012. Originally written in an interpreted domain-specific scripting language, the makers of Runescape transitioned the game to have the ability to be played on “your favourite tablets, platforms and even smart TVs.” The decade-old browser game experimented with the HTML5 graphics engine that provided impressive visuals. 6

Figure 7. RuneScape HTML5 comparison 20

How does this system fit into a larger application architecture? Since the beginning of software development, the application’s function and experience versus the application’s distribution and access have been on opposite ends of the software development spectrum. The perfect software application model would maximize both of these two features. As shown in the figure below, multiple generations of different software architecture have passed as the ideal software architecture generation is in the near future. Mainframe marked the beginning of the software architecture evolution with the server, keyboard, and monochrome screen. Mainframe had a low user experience but a high application access. In the second generation, the Client/Server model increased the user experience significantly by moving all of the application logic to the client side but decreased application distribution. By the third generation, instant access and an update of a server-driven application with better user interfaces was granted by the Web.

6 SOFTWARE ARCHITECTURES

In the current generation, the Mobile Apps model acted as the successor to the Client/Server model. This model is successful for games and other consumer applications. Although this model is a more efficient platform for users to use their applications, limitations such as platform dependency were still inherited by its predecessor. Therefore, some aspects of the Mobile Apps model still lose to the Web model. While the current mobile apps market trend is taking up society’s attention, the biggest Internet providers are competing to master HTML5. In the present, the latest version of every browser has complete HTML5 support. Even though the number of devices being introduced is always increasing, HTML5 has been proven to be the cross-platform application environment. If executed correctly, a HTML5 application code can be distributed on the Web or by mobile apps. As the impending fifth generation of the software architecture evolution, HTML5 will provide a rich user experience and high instant deployment. 14

Figure 8. Software Architecture Evolution 14

Also as shown in the figure below, HTML fits in the SGML architecture. SGML and XML are considered to be meta-languages - languages that are used to mark up languages. XML is a more restricted subset of SGML. As discussed before, HTML was derived from SGML and is an SGML vocabulary of SGML. XHTML is an application of XML and, hence, is a part of the XML family.

7 SOFTWARE ARCHITECTURES

Figure 9. Relationship between SGML, HTML, XML, and XHTML 15

High Level Architecture HTML5 is a large set of technologies that give users the ability to create more rich and powerful web sites and applications. The high level structures of HTML5 include semantics, connectivity, storage, multimedia, graphics, performance and integration, device access, and styling.4 These structures contain different software elements and the relationship of the entities make up the HTML5 software architecture.

Figure 10. HTML5 Enterprise Application Architecture 21

8 SOFTWARE ARCHITECTURES

Semantics 4 Semantics allows the user to describe more precisely what the content of the application is. A semantic element describes its meaning to both the browser and the developer.

Figure 11. HTML5 Semantic Elements 8

Section and outlines 26 New elements were introduced to allow web developers to describe the web document structure with standard semantics. By using the more precise HTML5 semantics, a web document outline is more predictable and easier for the browser to comprehend. Defining sections in HTML5 can be done in the main element. Sections can be nested. Headings (

,

,

,

,

,
) have increasing rank and are used to define the heading of the current section. Four new outlining and sectioning element in HTML5: