WFClient – Kiosks Made Easy – Okay...

View Github Repository Open presentation in a new window

tysonnero

See all presentation from tysonnero

WFClient – Kiosks Made Easy – Okay...

0 0

wfclient-presentation

On Github tysonnero / wfclient-presentation

WFClient

Kiosks Made Easy

Presented by Tyson Nero

Okay...

So, how is this WFClient thingy built?

WFClient is a Single Page Application (SPA) that is built on top of AngularJS, RequireJS, and Foundation.

SPA, What?

But the WFClient has many pages, doesn't it?

Yes, however...

  • A single HTML page (index.html) is served on first load
  • HTML fragments (views) are replaced to load new pages

Index.html

            <div id="container" class="row">
                    <div id="main">
                        <div ng-switch="view">
                            <div ng-switch-when="listing" ng-include="'views/listing/layout.html'" class="animated fadeIn"></div>
                            <div ng-switch-when="purchase" ng-include="'views/purchase/layout.html'" class="animated fadeIn"></div>
                            <div ng-switch-when="macys" ng-include="'views/macys/layout.html'" class="animated fadeIn"></div>
                        </div>
                    </div>
                    <div ng-include="" src="'views/navigation.html'"></div>
                </div>

Great!

What's Up with AngularJS?

AngularJS is a framework that handles much of the plumbing needed to create a web application such as:

  • Routing
  • Templating
  • Data Binding
  • Deep Linking
  • Server Communication
  • Reusable Components
  • Baked In Unit Testing

WFClient File Structure (App)

  • css - Vendor CSS files
  • images - Global image directory
  • js - Application JavaScript
  • lib - Vendor JavaScript libraries
  • themes - CSS, fonts, and images for themes
  • views - HTML templates

Application JS Files & Structure

  • Core

    • Functionality that is always enabled
    • Home page, categories, listings, purchasing
    • Routing, configuration, etc

  • Application Modules (Not Angular)

    • Plug-n-play functionality that extends the core
    • Separated by directory
    • Independent of each other and core

  • That's super... but why?

    • Code separation
    • Enable/disable features and functionality

(Angular) Modules

Modules are used to internally structure the application... like Namespaces in .NET.

  • A single module is defined at the root of the application
  • Successive modules are defined for each section of code

Control, Serve and Direct

  • AngularJS gives us internal modules for building our app.

    • Controllers - Business logic
    • Services - Server communication
    • Directives - DOM manipulation and events
    • Everything else - Filters, Interceptors, etc.

  • Under each application module (not Angular):

    • Code is separated by the above types
    • Angular modules are defined for each type

Views (HTML Templates)

  • Views represent the UI of the application via HTML fragments that are dynamically switched during routing.

    • Triggered when routes change
    • Data binding
    • Views within views

RequireJS? I pity the fool!

Quit your jibba jabba... Why RequireJS?

  • Modularity
  • Configuration
  • Dependency Injection & IoC
  • Script loading
  • Optimization

In the Beginning

In the beginning, there was RequireJS RequireJS said "load config.js", and it was loaded Config.js named everything and their location But config.js was lonely and needed a helper, thus RequireJS loaded main.js Main.js was given dominion over the app and told to be fruitful and multiply So, main.js loaded it's dependencies, those dependencies loaded their dependencies, and so on until the whole app was populated

Let's Get Our Theme On

Themes allow the application to to change its look-n-feel based on configuration and also dynamically.

  • Broken out by directory
  • Loaded based on configuration
  • Base theme is always loaded
  • A secondary theme will override base theme
  • Module themes can be loaded and unloaded dynamically
  • Assets cannot be shared

The Dev Server

WFClient is accompanied by a Node.js development server.

  • Emulates endpoints of the WFServer
  • Cross compatible
  • Allows testing various responses using pre-configured inputs

The End