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

21
Angular2 + Ng-Lightning + Lightning Design System = Great Apps Gordon Bockus Principal Engineer [email protected] @gordonk66 Patricia Cifra Senior Engineer [email protected] @pncifra

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

Page 1: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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

Gordon BockusPrincipal [email protected]@gordonk66

Patricia CifraSenior [email protected]@pncifra

Page 2: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Gordon BockusPrincipal Software Engineer

Page 3: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Patricia CifraSenior Software Engineer

Page 4: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Booth: #106

Page 5: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Chapter 1

Angular 2 Ng-Lightning Tools and Debugging

Chapter 2 Chapter 3 Chapter 4

Lightning Design Framework

Page 6: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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!

Page 7: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Angular2A tip of the Iceberg…

Page 8: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Angular 2Not Angular 1

Page 9: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Angular 2 - Typescript

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

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

es6

Page 10: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Angular 2 - Dependency Injection

Dependency Injection is now handled through imports and configuration.

Page 11: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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">

Page 12: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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/

Page 13: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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

Page 14: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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

Page 15: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

DemoA simple ToDo List

Page 16: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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

Page 17: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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

Page 18: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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

Page 19: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

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

Page 20: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Questions?

Page 21: Angular2 + Ng-Lightning + Lightning Design System = Great Apps

Thank Y u