Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Gordon BockusPrincipal Engineergbockus@spanning.com@gordonk66

Patricia CifraSenior Engineerpcifra@spanning.com@pncifra

Gordon BockusPrincipal Software Engineer

Patricia CifraSenior Software Engineer

Booth: #106

Chapter 1

Angular 2 Ng-Lightning Tools and Debugging

Chapter 2 Chapter 3 Chapter 4

Lightning Design Framework

Lighting Design SystemCollection of design patterns, components, and guidelines for creating unified UI for the Salesforce ecosystem.Not to be confused with Lightning Apps/ComponentsVisualForce/Lightning/Heroku/iOS and Angular!

Angular2A tip of the Iceberg…

Angular 2Not Angular 1

Angular 2 - Typescript

Types• Native Types: boolean, int, double, etc• Custom Types, enums, generics

Enabled Advanced Tooling• Visual Studio Code• WebStorm• Classes• Inheritance

es6

Angular 2 - Dependency Injection

Dependency Injection is now handled through imports and configuration.

Angular 2 - Templates

Interpolation/Property Binding - {}, []• Properties of directive or component• expressions {{ 1 + 1 }}• {{myVal}} or [myVal] = “expression”• <img [src]="heroImageUrl">

Event Binding - () template -> js• (click)=“onSave()”

Two-way Data binding -[()]• <input [(ngModel)]="heroName">

Ng-Lightning

A library that contains native Angular 2 components and directives written in TypeScript using the Lightning Design System CSS framework.

• http://ng-lightning.github.io/ng-lightning/

Limitations

Constraints with using framework in Salesforce• Lighting LockerService prevents importing of 3rd party/outside libraries• Same limitations as other JavaScript frameworks for Lightning Components

Where it’s great

Standalone App: Creating an Angular 2 App with Lightning Design UI that interacts with Salesforce REST servicesVisual Force page: Transpile your TypeScript code and upload the JavaScript code.Canvas App: Create a web app and surface it within a Canvas App

DemoA simple ToDo List

Debugging

Augury - Chrome extension for debugging and profiling Angular 2 applications.• Very similar to Chrome Developer Tools• View into ng-2 dependency injection• Visualize Router tree

Tools

VS Code - https://code.visualstudio.com/• Fluent in Typescript• Free• Lightweight• Extensions to enable NG2

WebStorm / IntelliJ - https://www.jetbrains.com/webstorm/• Our IDE of choice• Free for OSS• One stop shop for all development tasks

Summary

Review of Topics• Lightning Design System• Angular 2 offers powerful new features• Ng-Lighting built on top of Angular 2 with components following Lightning Design principles• Use in web apps, VF, or canvas.• Tools and debugging tips

Resources

Links• Ng-2 Quick start https://angular.io/docs/ts/latest/quickstart.html• Ng-2 Tutorial: https://angular.io/docs/ts/latest/tutorial/• Augury: https://augury.angular.io/• VS Code: https://code.visualstudio.com/• WebStorm: https://www.jetbrains.com/webstorm/• demo app: https://github.com/pncifra/ng-lightning-demo

Questions?

Thank Y u