Slide 1

Slide 1 text

EXPERIENCE USER CUSTOMER DEVELOPER

Slide 2

Slide 2 text

WHO AM I Kyle Ledbetter UX Director Built UI platforms and products for Joomla, eBay, Sears and now Teradata. @kyleledbetter Key Experience Handle

Slide 3

Slide 3 text

MISSION UI PLATFORM MISSION To build an atomic, standardized, reusable UI component platform for Teradata to use for all user interfaces, while collaborating in an open source model.

Slide 4

Slide 4 text

(Plus you have to manufacture the pole) A bus factor of 1 As many as we can teach (Advanced poles are provided for us) (Constantly getting improvements) WHY DO WE WANT A PLATFORM?

Slide 5

Slide 5 text

WHY MATERIAL DESIGN (and Angular-Material)? BOTTOM LINE: UNIVERSAL DESIGN SPEC COMPLETE CODE FRAMEWORK (that we get for “free”) GLOBAL DEV ADOPTION GLOBAL FAMILIARITY FANTASTIC ACCESSIBILITY EXTREMELY AGILE CYCLES WE FOCUS ON PRODUCT FEATURES & EASE OF USE IS OUR BRAND

Slide 6

Slide 6 text

WHY ANGULAR 2.0? MODERN APP DEVELOPMENT BACKEND CODE CONCEPTS COMMAND LINE TOOLS & TESTING CONTRIBUTE TO OPEN SOURCE NATIVE MOBILE & DESKTOP ATTRACT NEW HIRES BOTTOM LINE: WE BECOME MORE PRODUCTIVE AND BECOME INDUSTRY LEADERS

Slide 7

Slide 7 text

WHY DO THIS AT ALL? IT’S A LOT OF WORK & COORDINATION cross-team sharing of components, standards & personnel

Slide 8

Slide 8 text

WHAT IF WE DON’T? IT’S EASY TO STAY IN A SILO because of learning curves & deadlines Bootstrap LESS jQuery Java Covalent SCSS Angular 2.0 Foundation SASS Angular 1.5

Slide 9

Slide 9 text

What & Why? Material Design Spec + + Angular 2.0 Platform Angular-Material 2 Framework

Slide 10

Slide 10 text

OUR APPROACH IS BASED ON ATOMIC DESIGN LOGO LOGO ATOMS button MOLECULES search ORGANISMS header TEMPLATES dashboard PAGES your product our UI library is comprised of the molecular (or Covalent) bonds that we build on top of the atoms provided by Angular-Material WHY THE NAME COVALENT?

Slide 11

Slide 11 text

WHY EVEN USE COVALENT? Literally the Angular 2.0 Quickstart App

Slide 12

Slide 12 text

WHY EVEN USE COVALENT? Angular-Material 2 Kitchen Sink Quickstart

Slide 13

Slide 13 text

WHY EVEN USE COVALENT? Fully functional app to start customizing

Slide 14

Slide 14 text

WE INCLUDE THINGS EVERYONE NEEDS INCLUDED IN COVALENT PHASE 1 (released) PHASE 2 (Oct 14) PHASE 3 Quickstart App Data Tables Covalent App Templates Style & Brand Guide 4 Layouts + Flexbox Grid Dynamic JSON Forms Page Transition Animation Design Patterns (Cards, etc) Stepper (Wizard) D3 (v4) Charts Desktop Hybrid Apps 750+ Font Ligature Icons Expansion Panels CSS Material Color Palette Syntax Highlighting Detailed Documentation Component Loaders Angular 2 Best Practices File Upload Button/Input Github Deployment Custom Pipes (Filters) Mock API Server Mobile Hybrid Apps Sketch/Axure Templates ANGULAR-MATERIAL 2.0 Angular 2.0 Angular CLI TypeScript + ES6 Protractor + Karma a11y Native Desktop + Mobile

Slide 15

Slide 15 text

COVALENT DOES ALL THE BUSY WORK SO YOU CAN START BUILDING YOUR APP COVALENT VALUE

Slide 16

Slide 16 text

EcmaScript 6 (ES6 or ES2015) class Hamburger { constructor() { // This is the constructor. } listToppings() { // This is a method. } } // Return a promise which resolves after the specified interval function delay(interval) { return new Promise(function(resolve) { setTimeout(resolve, interval); }); } var oneSecondDelay = delay(1000); import { Component } from '@angular/core'; export class Angular2Component { } setTimeout(() => { // This prints "Max" since arrow functions bind to our current "this" context. console.log(this.name); }); var name = 'Sam'; var age = 42; console.log(`hello my name is ${name}, and I am ${age} years old`); for(let i in thing) { // i is available } // i is NOT available Classes Promises Modules Arrow Functions Template Strings Variables object-oriented programming for asynchronous computations allows @import & @export for anonymous functions string literal with backticks let instead of var let instead of var used to describe the blueprint of an object a value which may be available now, or in the future, or never easily export an isolated module and import into another new arrow notation can be used to define anonymous functions more simply can include newlines, and there is a new mechanism for inserting variables avoid variables leaking into the rest of the function

Slide 17

Slide 17 text

TYPESCRIPT TypeScript is a superset of ES6 all ES6 features are part of TypeScript, but not all TypeScript features are part of ES6 define the type in your javascript can be used to represent any non-primitive JavaScript object functions that are invoked with a prefixed @ symbol linting for TypeScript Typings Interfaces Decorators TSLint

Slide 18

Slide 18 text

ANGULAR 2.0 Angular 2.0 not the Angular of yesterday encapsulated views, patterns and elements attach behavior to components via attributes data modifiers connect UI to API and more Components Directives Pipes Services

Slide 19

Slide 19 text

COVALENT USAGE ACROSS TERADATA Platform Team Supports Platform Lighthouse UIs 1st “Customers” Consume & Extend Consume & Extend UX UDA Lighthouse UDA Products Customer Solutions Teradata Corp AppCenter, Listener, WLA Viewpoint, Ecosystem, QueryGrid Customer Facing Teams Analytical Solutions Professional Services Support & Services Customer Support Other Product Teams TD Management Console Teradata Studio Teradata Analytics Teradata Unity Information Technology

Slide 20

Slide 20 text

OPEN SOURCE CONTRIBUTION MODEL COVALENT REPO OPEN SOURCE CONSUMERS OPEN SOURCE CONTRIBUTORS REPORT BUGS & REQUEST FEATURES EXTEND WITH NEW COMPONENTS PULL REQUEST CONTRIBUTIONS Public Collaborators open source contributors Bug reports, feature requests, and pull requests from outside contributors internal product teams Internal Teradata product teams extending Covalent for everyone.

Slide 21

Slide 21 text

FEATURE REQUESTS

Slide 22

Slide 22 text

APPROVAL PROCESS for new feature requests FEATURE REQUESTS either directly in spec or by spirit can most products use it or just yours? more votes moves it up the queue even if it’s not perfect, PRs fasttrack features Does it follow Material Design? Is it platform worthy? Prioritized by likes Can your team open a PR?

Slide 23

Slide 23 text

BENEFITS OF USING COVALENT getcovalent.com

Slide 24

Slide 24 text

MATERIAL DESIGN LAYOUTS 4 MATERIAL DESIGN LAYOUTS Responsive, simple to implement type=“nav-view” type=“nav-list” type=“card-over” type=“manage-list”

Slide 25

Slide 25 text

RESPONSIVE FLEXBOX LAYOUT Virtually any width or position (Ported from Angular-Material v1.x) layout=“row” layout=“column” flex flex

Slide 26

Slide 26 text

COVALENT COMPONENTS, DIRECTIVES, PIPES & MORE

Slide 27

Slide 27 text

COVALENT QUICKSTART APP Not just a quick fox jumped over the lazy dog quickstart

Slide 28

Slide 28 text

COVALENT DATA FOR RAPID PROTOTYPING LOCAL GO API SERVER *IN APP* custom mock data + CRUD! npm run start api

Slide 29

Slide 29 text

STEPPER WIZARD-LIKE MULTIPLE STEPS great for complex forms ... add content that will be shown when the step is "active" Close ... add summary that will be shown when step in is "complete" state (optional)

Slide 30

Slide 30 text

EXPANSION PANELS ACCORDIONS ON STEROIDS used invidually or grouped pin_drop

Google

Headquarters

1600 Amphitheatre Pkwy
Mountain View, CA 94043, USA

...

Slide 31

Slide 31 text

FILE UPLOAD SIMPLE FILE UPLOAD BUTTON click or drag’n’drop single or multiple files

Slide 32

Slide 32 text

CHIPS & AUTOCOMPLETE TAG-LIKE CHIPS OR AUTOCOMPLETE FORM until they are released in material2

Slide 33

Slide 33 text

LOADING MASK & PROGRESS PROGRESS LOADERS WITH MASKS progress bars or circular loaders
...
...

Slide 34

Slide 34 text

SYNTAX HIGHLIGHTING CODE SNIPPET HIGHLIGHTING using highlight.js

hello world!

{{property}} pre { display: block; overflow-x: auto; padding: 0; margin: 0; background: #002451; ... }

Slide 35

Slide 35 text

JSON OBJECT TREE COLLAPSIBLE JSON TREE to display nested key:value pairs ... }) export class Demo { object: any = { property: 'value', array: [1, 2, 3] }; }

Slide 36

Slide 36 text

MARKDOWN MARKDOWN IN ANGULAR 2 for docs or blogs

# Heading (H1)
## Sub Heading (H2)
### Steps (H3)
###List Items
* One
* Two
* Three
Emphasis, aka italics, with *asterisks* or
_underscores_.
Strong emphasis, aka bold, with
**asterisks** or __underscores__.
Combined emphasis with **asterisks and
_underscores_**.

Slide 37

Slide 37 text

MEDIA QUERIES MEDIA QUERIES FOR NG ATTRIBUTES add/remove attributes on the DOM for breakpoints
...

Slide 38

Slide 38 text

HTTP WRAPPERS EASIER INTERCEPTOR EXPERIENCE wraps ng2 Http service import { Injectable } from '@angular/core'; import { IHttpInterceptor } from '@covalent/http'; @Injectable() export class CustomInterceptor implements IHttpInterceptor { onRequest(requestOptions: RequestOptionsArgs): RequestOptionsArgs { ... // do something to requestOptions return requestOptions; } onResponse(response: Response): Response { ... // check response status and do something return response; } onResponseError(error: Response): Response { ... // check error status and do something return error; } }

Slide 39

Slide 39 text

PIPES DISPLAY DATA MORE INTELLIGENTLY digits, filesize, time ago, truncate & more {{ item.users | digits }} {{ item.filesize | bytes }} {{ item.timestamp | timeAgo }} {{ item.timestamp | timeDifference }} {{ item.title | truncate:50 }}

Slide 40

Slide 40 text

SIMPLE DIALOGS SIMPLE DIALOG TEMPLATES easier than the core material2 dialogs export class Demo { constructor(private _dialogService: TdDialogService, private _viewContainerRef: ViewContainerRef) { this._dialogService.setDefaultViewContainerRe f(_viewContainerRef); } openAlert(): void { this._dialogService.openAlert({ message: 'Alert using a default ViewContainerRef.', }); } }

Slide 41

Slide 41 text

COMING SOON: D3 CHARTS COMPONENT D3 v4 CHARTS IN ANGULAR 2.0 COMPONENTS with Material Design colors, depth & transitions

Slide 42

Slide 42 text

COMING SOON: DATATABLES COMPONENT MATERIAL DESIGN DATA TABLES IN ANGULAR 2 search, sort, select & more

Slide 43

Slide 43 text

AN OPEN SOURCE DESIGN SPEC WE FOLLOW THE OFFICIAL MATERIAL SPEC though it can be ammended

Slide 44

Slide 44 text

IMMERSIVE WITH DEPTH EACH SCREEN IS SPECIFIC & INTENTIONAL instead of crowding a single view

Slide 45

Slide 45 text

LEARN THE OFFICIAL SPEC LEARN MATERIAL DESIGN INSIDE & OUT it’s not just a skin or a coat of paint

Slide 46

Slide 46 text

GET INSPIRED THERE’S TONS OF INSPIRATION OUT THERE from Google & many others

Slide 47

Slide 47 text

SKETCH TEMPLATE

Slide 48

Slide 48 text

AXURE LIBRARY

Slide 49

Slide 49 text

PREREQS 4.4+ beta 15+ 3.0+ latest

Slide 50

Slide 50 text

CLONE THE QUICKSTART & INSTALL https://teradata.github.io/covalent/#/docs > git clone https://github.com/Teradata/covalent-quickstart.git meetup > cd meetup clone the repo and enter the directory > npm i installs the node dependencies > ng serve ** NG Live Development Server is running on http://localhost:4200. ** Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 2.81 kB 0 webpack: bundle is now VALID.

Slide 51

Slide 51 text

QUICKSTART RUNNING LOCALLY

Slide 52

Slide 52 text

RESEARCH & INSPIRATION

Slide 53

Slide 53 text

RESEARCH & INSPIRATION

Slide 54

Slide 54 text

CUSTOMIZE MOCK API WITH COVALENT DATA https://teradata.github.io/covalent/#/docs/mock-data mock-api/ schemas/ items.yaml mock-api/ datum/ colors.text initial_entries: 4 randomize: false item_id: _uuid_ color: _color_ name: _firstname_ _lastname_ description: _activity_ icon: _icon_ created: _itemtimestamp_ red pink purple deep-purple indigo blue light-blue cyan

Slide 55

Slide 55 text

RUN COVALENT DATA API SERVER > npm run start-api INFO[0000] ################################################################## INFO[0000] ######## ######## INFO[0000] ######## Teradata Covalent Atomic Data mock API server ######## INFO[0000] ######## Copyright 2016 by Teradata. All rights reserved. ######## INFO[0000] ######## This software is covered under the MIT license. ######## INFO[0000] ######## ######## INFO[0000] ################################################################## (in a new Terminal tab)

Slide 56

Slide 56 text

CHECK THE QUICKSTART

Slide 57

Slide 57 text

COVALENT TO THE RESCUE (ALREADY) USE A COVALENT TRUNCATE PIPE Change To to fix the material2 list item overflow

{{item.description}}

{{item.description | truncate:20 }}

Slide 58

Slide 58 text

CUSTOMIZE THE ANGULAR-MATERIAL THEME CHANGE 3 SIMPLE COLORS & HUES following the material color spec src/ app/ styles.scss theme.scss @import '~@angular/material/core/theming/all-theme'; // Include the base styles for Angular Material core @include md-core(); // Define the palettes for your theme using the Material Design palettes $primary: md-palette($md-red, 600); $accent: md-palette($md-teal, A700); $warn: md-palette($md-orange, 800); // Create the theme object (a Sass map containing all of the palettes). $theme: md-light-theme($primary, $accent, $warn); // Include theme styles for core and each component used in your app. @include angular-material-theme($theme);

Slide 59

Slide 59 text

CUSTOMIZE THE LOGO & TITLE CHANGE SIDENAV LOGO & TITLE using your custom image & text src/ app/ main/ main.component.html {{item.icon}}{{item.title}}

Slide 60

Slide 60 text

CUSTOMIZE THE LOGO & TITLE CHANGE TOP TOOLBAR LOGO & TITLE using your custom image & text src/ app/ dashboard/ dashboard.componen
Austin AngularJS chrome_reader_mode
...

Slide 61

Slide 61 text

CUSTOMIZE THE LOGO & TITLE

Slide 62

Slide 62 text

CUSTOMIZE THE TOOLBAR ICONS src/ app/ dashboard/ dashboard.componen
Austin AngularJS add notifications person
...

Slide 63

Slide 63 text

LET’S START DESIGNING IN CODE!
{{ '1639'| digits }} group
Members
{{ '14'| digits }} chat
Group Reviews
Flexbox layout, Material typography & icons, Covalent classes

Slide 64

Slide 64 text

FLEXBOX LAYOUT
layout=“column” layout-gt-xs=“row” flex-gt-xs=“60” flex-gt-xs=“40” 60/40 layout only wider than extra-small

Slide 66

Slide 66 text

TABS, TEMPLATES, LISTS, OH MY!

Slide 67

Slide 67 text

USER LIST FROM USER SERVICE Members members of this Meetup account_circle

{{item.display_name}}

{{item.email}}

Joined: {{item.created}}

View More

Slide 68

Slide 68 text

OUR DASHBOARD

Slide 69

Slide 69 text

UPDATE SIDENAV ROUTES

Slide 70

Slide 70 text

UPDATE MAIN COMPONENT CLASS src/ app/ main/ main.component.ts routes: Object[] = [{ title: 'Home', route: '/', icon: 'home', }, { title: 'Members', route: '/members', icon: 'people', }, { title: 'Sponsors', route: '/sponsors', icon: 'business', }, { title: 'Photos', route: '/photos', icon: 'collections', }, { title: 'Pages', route: '/pages', icon: 'description', }, { title: 'Discussions',

Slide 71

Slide 71 text

UPDATE ANGULAR ROUTES src/ app/ app.routes.ts const routes: Routes = [ {path: 'login', component: LoginComponent}, {path: '', component: MainComponent, children: [{ component: DashboardComponent, path: '', }, {path: 'dashboard-product', component: DashboardProductComponent}, {path: 'item/:id', component: DetailComponent}, {path: 'logs', component: LogsComponent}, {path: 'form', component: FormComponent}, {path: ‘members’, children: [ {path: '', component: UsersComponent}, {path: 'add', component: UsersFormComponent}, {path: ':id/delete', component: UsersFormComponent}, {path: ':id/edit', component: UsersFormComponent}, ]}, ]}, ];

Slide 72

Slide 72 text

DETAIL VIEW LET’S CHANGE FROM A USER TO A MEETUP keeping the card-over layout

Slide 73

Slide 73 text

UPDATE DETAIL COMPONENT CLASS src/ detail/ detail.component.ts import { ItemsService, UsersService } from '../../services'; export class DetailComponent implements OnInit { item: Object = {}; users: Object[]; constructor(private _router: Router, private _itemsService: ItemsService, private _usersService: UsersService, private _route: ActivatedRoute, private _location: Location) {} goBack(): void { this._location.back(); } ngOnInit(): void { this._usersService.query().subscribe((users: Object[]) => { this.users = users; }); this._route.params.subscribe((params: {id: string}) => { let itemId: string = params.id;

Slide 74

Slide 74 text

NOW WE HAVE THE MEETUP INFO & USERS MINIMAL UPDATES TO CUSTOMIZE toolbar, item info & users

Slide 75

Slide 75 text

ADDING EXPANSION PANELS src/ detail/ detail.component.html /* summary content in td-expansion-summary */
Organzied by {{item.name}} at 6:00 PM on {{item.date | date}}
/* insert any content you want here for the expansion */ ....

Slide 76

Slide 76 text

ADDING EXPANSION PANELS

Slide 77

Slide 77 text

FINAL PRODUCT (KEEP ITERATING!)

Slide 78

Slide 78 text

Covalent getcovalent.com