Post on 09-Jan-2017
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