Common User Interfaces, Users, Companies, Products, Access Tokens, Auth

and some TypeScript

Aim


Unbundled development

Unified applications

A Common Theme


A Common Theme


  • Consistency of UX across products
  • Reusable components for consumption
  • Allows for easier maintenance of code
  • Better learning/ramping up between projects

A Common Theme


Get it here:

https://stash.brandnetworksinc.com/projects/UI/repos/bn.bootstrap.theme

A Common Theme


Include it using bower:

bower \
install \
ssh://git@stash.brandnetworksinc.com:2200/ui/bn.bootstrap.theme.git \
--save

A Common Theme


Use it:

 <link 
   href="bower_components/bn-bootstrap/dist/css/bn-bootstrap.min.css" 
   rel="stylesheet">

A Global Nav Bar




A Global Nav Bar

From any app in the ecosystem, users can:

  • Masquerade
  • Logout
  • Switch product
  • Switch company
  • App specific actions

A Global Nav Bar


Get it here:

https://stash.brandnetworksinc.com/projects/AUTH/repos/bn.topnav

A Global Nav Bar


Include it using bower:

bower \
install \
ssh://git@stash.brandnetworksinc.com:2200/auth/bn.topnav.git \
--save

A Global Nav Bar


Use it:

<link rel="stylesheet" href="bower_components/bn-topnav/dist/topnav.css" />
<script src="bower_components/bn-topnav/dist/topnav.js"></s.cript>

...

<topnav settings="topnavSettings" user="user" company="company" catm="catmService">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">bn.ads</a>
  </div>
</topnav>

Single Sign On


Single Sign On Libraries

https://stash.brandnetworksinc.com/projects/AUTH
  • bn.tokens-js
  • bn.tokens-angular
  • bn.tokens-node

// tokens angular
angular.module('app').service('auth', function(tokens) {
  // Create a service so we only initialize once
  return tokens.withBaseUrl('http://tokens.optim.al');
});

angular.module('app').controller('MainCtrl', function($scope, auth) {
  auth.getSession().then(function(session) {
    $scope.me = session.user;
  });
});

Single Sign On Tokens


with the tokens library


Users, Companies, Products, Access Tokens


Users, Companies, Products, Access Tokens



Javascript with Types
Developed by Microsoft
Apache Licensed
Works on Mac OS X and Linux using Node

Why TypeScript?

Type Safety
Type Definitions for Javascript
IDE Support
Smart Code Completion
Refactoring
Some of ES6 Now


Some of ES6 Now

Arrow functions
(name) => "Hello " + name;
Default Arguments
function hello(name="World") { return "Hello " + name; }
Classes
class Greeter { constructor(name) { this.name = name; } }
Modules
module greeters { /* encapsulated code */ }

Type Safety and Inference


var helloString = "Hello World"!;
var helloArray = ["Hello World!"];

function helloFunction(name) {
    return "Hello " + name + "!";
}

Type Safety and Inference


var helloString : string = "Hello World!";
var helloArray : string[] = ["Hello World!"];

function helloFunction(name : string) : string {
    return "Hello " + name + "!";
}

Compiled to Javascript


var helloString = "Hello World!";

var helloArray = ["Hello World!"];

function helloFunction(name) {
    return "Hello " + name + "!";
}
//# sourceMappingURL=test.js.map

IDE Support


Visual Studio

Web Storm and IntelliJ
 
Plugins for vim, Sublime Text, emacs



Writing an AngularJS App in TypeScript

References 

/// <reference path="types/angularjs/angular.d.ts"/>
/// <reference path="types/angularjs/angular-route.d.ts"/>
/// <reference path="types/restangular/restangular.d.ts"/>

Type definitions make Javascript type safe

interface IRouteProvider extends IServiceProvider {
    otherwise(params: any): IRouteProvider;
    when(path: string, route: IRoute): IRouteProvider;
}
interface IRoute {
    controller?: any;
    controllerAs?: any;
    name?: string;
    template?: string;
    templateUrl?: any;
    resolve?: any;
    redirectTo?: any;
    reloadOnSearch?: boolean;
}

Routing 

angular.module("myApp", ["ngRoute", "restangular"])
    .config(["$routeProvider",
        ($routeProvider: ng.route.IRouteProvider) => {
            $routeProvider
                .when("/", {
                    templateUrl: "views/main.html",
                    controller: "MainCtrl",
                    resolve: {
                        entries: ["Restangular", (Restangular: Restangular) => {
                            return Restangular.all("entries").getList();
                        }]
                    }
                })
                .otherwise("/")
    }]);

Controllers 

class MainCtrl {

    constructor(private $scope, public entries: ArrayRest<IEntryRest>) {
        $scope.vm = this;
    }
    
    // ...

    public upvote(entry: IEntryRest) {
        // POST on /entries/:entryId/upvote
        entry.post("upvote", {}).then((updatedEntry: IEntryRest) => {
            entry.votes = updatedEntry.votes;
        });
    }
}

angular.module("myApp")    .controller('MainCtrl', ['$scope', 'entries', MainCtrl]);

common

By jamiemccrindle

Made with Slides.com

common

  • 1,197

More from jamiemccrindle