< PreviousChapter 7: Implementation190Chapter Contents7.1 Technology Platform ........................................................ 1917.1.1 Platform Run Time ................................................... 1927.1.2 Platform Language .................................................. 1927.1.3 Platform Standard Library .......................................... 1927.2 Technology Stack ............................................................. 1937.2.1 Stack Frameworks .................................................... 1937.2.2 Stack Libraries ........................................................ 1937.2.3 User Interface Aspect Mapping .................................... 1947.3 Technology Environment ................................................... 1957.3.1 GemstoneJS: Run-Time Framework and Libraries .............. 1957.3.2 GemstoneJS: Build-Time Frameworks and Tools ................ 1967.3.3 GemstoneJS: Hello World ........................................... 197Technology Platform1917.1 Technology PlatformThe only thing that grows faster than technology, are our expectations of it. — Tom GoodwinThe implementation of an application requires a so-called Walking Skeleton. This is the technical integration of a particular Technology Platform and a particular Technology Stack (see Figure 7.1 on page 191). It is the technical basis which has to prove that it can cover all functional and non-functional requirements of the particular application it was chosen for. The Walking Skeleton has to be able to execute a small end-to-end functionality of the application.The Technology Platform is the core of the Walking Skeleton. It con-sists of a Platform Run Time, a Platform Language, and a Platform Stand-Deciding and crafting the Walking Skeleton is the most important techni-cal work of a Software Architect. Hence, it is the primary aspect where HUICA manifests in prac-tice.Run-Time (RT)Language (LG)Application (APP)Framework (FRW)Libraries (LIB)Standard Library (STD)Technology PlatformTechnology StackApplicationChallenge:Cover Functional andNon-FunctionalRequirementsAttention:invasive toprogrammingmodelFocus ofWalking SkeletonFigure 7.1: Technology Stack and PlatformChapter 7: Implementation192ard Library. For the Hierarchical User Interface Component Architecture (HUICA) we first have to choose a suitable Reference Technology Platform.7.1.1 Platform Run TimeAs the HUICA primarily targets the HTML5 Single-Page-App context in practice, the Platform Run Time effectively is a JavaScript Virtual Machine (JSVM).For the major Web browsers the Platform Run Time is in particular: ■V8 in Google Chrome ■SpiderMonkey in Mozilla Firefox ■Chakra in Microsoft Edge ■JavaScriptCore in Apple Safari and OperaIn practice, the particular JSVM is of no great importance for HUICA, as long as it is sufficiently fast and supports at least ECMAScript 5. This is already the case for all JSVMs of all major Web browser since about the year 2015.Notice that the Platform Run Time, in general, nevertheless is rather invasive to the Walking Skeleton and the target application from an ar-chitecture point of view. Once a Walking Skeleton is based on it, it usually cannot be changed at all.7.1.2 Platform LanguageThe chosen underlying JavaScript Virtual Machine (JSVM), as the lowest common denominator, usually supports ECMAScript 5. Most also already support ECMAScript 6 (aka ECMAScript 2015) and higher.However, for the HUICA-based particular Walking Skeleton, we choose the lat-est ECMA Script 2017, as it provides the essential async/await functionality required for elegant asynchronous programming. We choose a built-time transpilation from ECMAScript 2017 to ECMAScript 5 with the help of the Babel transpiler.7.1.3 Platform Standard LibraryAs the HUICA primarily targets the HTML5 Single-Page-App context in practice, the Platform Standard Library is inherently given by the HTML5 Web Technology Stand-ards, most prominently the Application Programming Interface (API) of the Docu-ment Object Model (DOM, see subsection 3.3.3 on page 51).HUICA works with any reasonable JSVM, EC-MAScript 5 and later and the standardized HTML5 APIs.Technology Stack1937.2 Technology StackAny sufficiently advanced technology is indistinguishable from magic. — Arthur C. Clarke, “Profiles of The Future,” 1961 (Clarke’s third law)The bare Technology Platform is not sufficient for the Walking Skeleton, as all the User Interface Aspects (see section 6.2 on page 116) of the HUICA cannot be cov-ered by it alone. Hence, a Technology Stack has to be defined on top of the chosen Technology Platform (compare Figure 7.1 on page 191).The Technology Stack consists of primary Stack Frameworks and secondary Stack Libraries. For the HUICA we also have to choose a suitable Reference Technol-ogy Stack.7.2.1 Stack FrameworksBeside the Platform Run Time, the Stack Frameworks are usually the sec-ond aspect which is very invasive to the Walking Skeleton. The reason is that Frameworks usually demand a particular Programming Model during development time and control the application life-cycle during run time.For the HUICA we choose the following particular major CSS/JavaS-cript Frameworks: ■Bootstrap ■VueJS ■I18Next ■ComponentJS * ■ComponentJS-MVC * ■GraphQL-IO * The marked (*) Frameworks were originally authored for HUICA. See [Engelschall 2009a], [Engelschall 2016c] and [Engelschall 2017b]. All others are third-party solu-tions. 7.2.2 Stack LibrariesTo complement the Stack Frameworks and to cover all remaining User Interface Aspects (see section 6.2 on page 116) of the HUICA, we choose the following par-ticular additional major CSS/JavaScript Libraries:The HUICA implementa-tion is primarily driven by the particularly chosen Frameworks and Librar-ies.Chapter 7: Implementation194 ■Normalize.css ■Animate.css ■Font-Awesome ■TypoPRO * ■jQuery ■jQuery-Stage * ■Vue-Params * ■Vue-I18Next * ■URI.js ■Router5 ■MouseTrap ■HammerJS ■Howler ■Store.js ■Axios ■Pure-UUID * ■Moment ■NumeralThe marked (*) Libraries were originally authored for HUICA. See [Engelschall 2013a], [Engelschall 2014a], [Engelschall 2016a]. All others are third-party solutions.7.2.3 User Interface Aspect MappingThe complete covering of the User Interface Aspects (see section 6.2 on page 116) of the HUICA is important, we show the particular mapping of Frameworks and Libraries onto the User Interface Aspects.User Interface AspectFrameworkLibraries (or Plugins)Interface ThemeBootstrapFont-Awesome, TypoPROInterface WidgetsBootstrap(none)Interface LayoutBootstrap(none)Interface EffectsVueJSAnimate.css, HowlerInterface InteractionsVueJSHammer, MouseTrapInterface StatesVueJS(none)Interface MaskVueJS(none)Interface EnvironmentjQueryjQuery-StageData BindingVueJSComponentJSData ConversionVueJS, I18NextVue-I18Next, Moment, NumeralData ModelVueJSComponentJSData CachingComponentJSStore.jsBusiness ModelGraphQL-IO(none)Business CommunicationGraphQL-IOAxiosDialog StructureComponentJS-MVC(none)Dialog Life-CycleComponentJS(none)Technology Environment195User Interface AspectFrameworkLibraries (or Plugins)Dialog CommunicationComponentJS(none)Dialog NavigationComponentJSRouter5, URI.js7.3 Technology EnvironmentWhen teaching a rapidly changing technology, perspective is more important than content. — Richard E. PattisThe Web Technologies since over two decades are rapidly evolving. Hence, it is a major challenge in the practice of Software Engineering projects to continuously cope with the latest development in the products underly-ing the Technology Platform and Technology Stack.Additionally, having to master a particular integration of products in every project is both an initial burden and a long-term maintenance problem. Hence, it is vital to place this integration into a bundling, reusable and extensible Technology Environment.For the HUICA, the particular previously described Technology Platform and Technology Stack plus its corresponding build-time tools were pre-integrated into a stand-alone Open Source Software product named GemstoneJS (see Figure 7.2 on page 196 and [Engelschall 2016e]). GemstoneJS and its related products are all hosted on github.com and available as NPM packages from npmjs.com.7.3.1 GemstoneJS: Run-Time Framework and LibrariesThe GemstoneJS Technology Environment consists of a pre-integration of primar-ily 15 third-party and 28 originally authored Run-Time Frameworks, Libraries and Framework/Library Plugins. The 28 originally authored parts in total consist of 12.461 Lines of Code (LoC) as of 2018-01-05 (compare the right column in Figure 7.3 on page 197). These originally authored parts required at least about 250 person-days to develop dur-ing this doctoral project — based on just the conservative assumption of even an “above-industry” average value of about 50 LoC/day (“bug-free”).The major efforts were required by the two central frameworks ComponentJS [Engelschall 2009a] and GraphQL-IO [Engelschall 2017b] with all their built-in func-tionalities and optional plugins.The product name Gem-stoneJS was chosen for the Technology Environ-ment, because it bundles and pre-integrates a set of “true gemstones” of the JavaScript world.Chapter 7: Implementation1967.3.2 GemstoneJS: Build-Time Frameworks and ToolsAdditionally, the GemstoneJS Technology Environment consists of a pre-integra-tion of primarily 19 third-party and 29 originally authored Build-Time Frameworks, Tools and Framework/Tool Plugins. The 29 originally authored parts in total consist of 4.423 Lines of Code (LoC) as of 2018-01-05 (compare the left column in Figure 7.3 on page 197). These originally authored parts required at least about 100 person-days to develop during this doctorate — based on just the conservative assumption of even an “above-industry” average value of about 50 LoC/day (“bug-free”).The major efforts were required by the WebPack linter and loader plugins and the extensive dynamic WebPack configuration and process management.GemstoneJS and all its originally authored parts required nearly two man-years to develop during this doctoral project.Figure 7.2: GemstoneJS on the WebTechnology Environment1977.3.3 GemstoneJS: Hello WorldThe “Smoke Test” of GemstoneJS is the smallest possible application based on Gem-stoneJS, which at least produces the text “Hello world”. As a result of this minimum approach, this application does still not show HUICA aspects, of course. However, it gives an early impression of how a GemstoneJS application looks like. See Chapter Figure 7.3: GemstoneJS Authoring EffortsTool/PluginJS LoCFramework/Library/PluginJS LoCGemstone Stub31Gemstone Framework Frontend292Gemstone Tool489ComponentJS5.689Installed Packages65ComponentJS MVC281Latching122GraphQL-IO Client488DuckyJS863StdAPI78Gemstone Tool Backend38Latching *Gemstone Tool Frontend409GraphQL Query Compress39Gemstone Tool Generator668Apollo Client WS295Gemstone Config147WebSocket Framed83Gemstone Config ESLint31Encodr58Gemstone Config HTMLHint76Pure-UUID510Gemstone Config StyleLint26DuckyJS *Gemstone Config TSLint10jQuery-Stage139Gemstone Config WebPack476Vue-Params64Gemstone Linter CSS81Vue-I18Next39Gemstone Linter HTML36Gemstone Framework Backend138Gemstone Linter JS49GraphQL-IO Server871Gemstone Linter JSON44StdAPI *Gemstone Linter TS40Latching *Gemstone Linter YAML49GraphQL Tools Sequelize694Gemstone Loader CSS82GraphQL Tools Subscribe410Inline-Assets384GraphQL Tools Types373Gemstone Loader HTML73HAPI Plugin GraphiQL136Inline-Assets *HAPI Plugin Peer91Gemstone Loader JS67HAPI Plugin WebSocket262Gemstone Loader JSON15HAPI Plugin Co49Gemstone Loader NoStrict7HAPI Plugin Ducky42Gemstone Loader TS2HAPI Plugin Header34Gemstone Loader UCID21HAPI Plugin Traffic77Gemstone Loader YAML22IPC PubSub387IPC KeyVal764TextFrame78* double-entry, just counted onceDuckyJS *Pure-UUID *Total:4.423Total:12.461Chapter 7: Implementation1988 for the source code view of a more reasonable HUICA-based GemstoneJS example application and Chapter 9 for additional impressions from real-world applications based on both GemstoneJS and HUICA.Source FilesThe GemstoneJS Hello World application consists of at least 4 files:package.jsonThis is the Node Package Manager (NPM) specification in JSON format, for referenc-ing the GemstoneJS packages as build-time dependencies and defining the build and start commands for the application:{ “name”: “hello”, “version”: “0.0.0”, “devDependencies”: { “gemstone”: “latest”, “gemstone-tool”: “latest”, “gemstone-tool-frontend”: “latest”, “gemstone-framework-frontend”: “latest” }, “scripts”: { “build”: “gemstone frontend-build”, “start”: “open dst/index.html” } }gemstone.yamlThis is the GemstoneJS configuration in YAML format, for specifying some meta-information about the entire project, which we are using in the GemstoneJS build process.meta: title: hello description: “GemstoneJS Hello World” keywords: “gemstone, hello, world” author: “Gemstone Project” path: output: ./dst source: ./src main: ./src/hello.jssrc/hello.jsThis is the main program in ECMAScript 2017 format, for booting the GemstoneJS framework and rendering the User Interface with the help of a single View compo-nent Hello.Technology Environment199import gs from “gemstone” import mask from “./hello.html” class Hello extends gs.mvc.View { render () { this.plug(this.mask(“hello”, { render: mask })) } } gs.boot({ app: “hello”, config: process.config, ui: () => [ “hello”, Hello, “visible” ], sv: (url, cid) => ({}) })src/hello.htmlThis is the User Interface in HTML/VueJS format, for specifying the separated User Interface Mask. <div> Hello World </div>Build ProcessThe application can be built and opened with the following commands (see Figure 7.4 on page 200 for details):$ npm install $ npm run build $ npm startThe result is an opened Web browser as seen in Figure 7.5 on page 201.Next >