build amazing apps with aurelia - webinar slides

30
Build amazing apps with Aurelia WEBINAR

Upload: belatrix-software

Post on 10-Feb-2017

198 views

Category:

Software


2 download

TRANSCRIPT

Page 1: Build amazing apps with Aurelia - Webinar Slides

Build amazing apps with Aurelia

WEBINAR

Page 2: Build amazing apps with Aurelia - Webinar Slides

Guillermo Eyherabide.Net developer

Hugo Marcelo Del Negro Software Engineer

Page 3: Build amazing apps with Aurelia - Webinar Slides

Javascript is the most popular language

Page 4: Build amazing apps with Aurelia - Webinar Slides

What is Aurelia?

Aurelia is a powerful JavaScript client framework based on standards to create web, mobile and desktop applications using MV* architecture.

QUESTIONS #AureliaApps

Page 5: Build amazing apps with Aurelia - Webinar Slides

What about support?Durandal INC. provides commercial support and trainings…

QUESTIONS #AureliaApps

Page 6: Build amazing apps with Aurelia - Webinar Slides

Aurelia overview

• Vanilla Written with ES2016

• No external dependencies except polyfills

• Two-Way Data binding

• Use ES5, ES 2015, ES 2016 and Typescript

• Testable due to Dependency Injection Container. Use Karma.

• Extensible HTML

• Modern architecture

• Community

QUESTIONS #AureliaApps

Page 7: Build amazing apps with Aurelia - Webinar Slides

Package Managers

NPM (Node Package Manager)

QUESTIONS #AureliaApps

JSPM (Browser Package Manager) which uses SystemJS for loading any module format. Install packages from npm or github and allows SystemJS to load them.

Page 8: Build amazing apps with Aurelia - Webinar Slides

Transpilers/Polyfills

“Transpilers are compilers that allow

developers to use next generation

JavaScript, today.”

QUESTIONS #AureliaApps

“Polyfills will help us to use webcomponents specifications across all modern browsers.”

BabelTraceur Compiler (Google)

Page 9: Build amazing apps with Aurelia - Webinar Slides

Build System Workflow

• Gulp is a task runner similar to Grunt

• Gulp will help with several tasks and it is often used for front end

tasks like:

• Spinning up a web browser

• Reloading the browser automatically whenever a file is saved

• Using pre-processors like SASS or LESS

• Optimizations tasks (Bundling, Minifying, etc.)

QUESTIONS #AureliaApps

Page 10: Build amazing apps with Aurelia - Webinar Slides

Getting Started

• Aurelia Skeleton will help us to start creating production ready

applications having things as the following:

• Gulp tasks created for bundling, minification, build, etc.

• Karma unit testing running against the skeleton.

• And already working sample app.

• Its production ready.

QUESTIONS #AureliaApps

Page 11: Build amazing apps with Aurelia - Webinar Slides

The View-ModelIt contains data and behavior

QUESTIONS #AureliaApps

Page 12: Build amazing apps with Aurelia - Webinar Slides

The View-ModelQUESTIONS #AureliaApps

Page 13: Build amazing apps with Aurelia - Webinar Slides

The ViewHTML file where data binding against the view-

model happen…

QUESTIONS #AureliaApps

Page 14: Build amazing apps with Aurelia - Webinar Slides

The ViewQUESTIONS #AureliaApps

Page 15: Build amazing apps with Aurelia - Webinar Slides

The RouterMake the navigation happen.

Page 16: Build amazing apps with Aurelia - Webinar Slides

The Router

Router-view: It is an Aurelia custom-Element where the current navigation screen will be rendered.

QUESTIONS #AureliaApps

Page 17: Build amazing apps with Aurelia - Webinar Slides

The Dependency Injection Container

Dependency Injection Container can simplify the process of decomposing a system breaking down complexity into a set of

smaller objects.

QUESTIONS #AureliaApps

Page 18: Build amazing apps with Aurelia - Webinar Slides

The dependency Injection ContainerQUESTIONS #AureliaApps

Page 19: Build amazing apps with Aurelia - Webinar Slides

Binding: Value ConverterA value converter is a class whose responsibility is to convert view-model values into values that are appropriate to display

in the view and visa-versa,

QUESTIONS #AureliaApps

Page 20: Build amazing apps with Aurelia - Webinar Slides

Binding: Value Converter QUESTIONS #AureliaApps

Page 21: Build amazing apps with Aurelia - Webinar Slides

Binding: Value Converter QUESTIONS #AureliaApps

Page 22: Build amazing apps with Aurelia - Webinar Slides

Templating: Custom AttributesCustom Attributes are used to add custom behaviors to DOM

elements.

Page 23: Build amazing apps with Aurelia - Webinar Slides

Templating: Custom Attributes QUESTIONS #AureliaApps

Page 24: Build amazing apps with Aurelia - Webinar Slides

Templating: Custom ElementsCustom Elements are used to add custom components to

Aurelia Applications.

QUESTIONS #AureliaApps

Page 25: Build amazing apps with Aurelia - Webinar Slides

Templating: Custom Elements QUESTIONS #AureliaApps

Page 26: Build amazing apps with Aurelia - Webinar Slides

Event AggregatorEvent Aggregator should be used when your events needs to be attached to more listeners or observe some functionality.

QUESTIONS #AureliaApps

Page 27: Build amazing apps with Aurelia - Webinar Slides

Event Aggregator QUESTIONS #AureliaApps

Page 28: Build amazing apps with Aurelia - Webinar Slides

Event Aggregator QUESTIONS #AureliaApps

Page 29: Build amazing apps with Aurelia - Webinar Slides

Q&A

QUESTIONS #AureliaApps

Page 30: Build amazing apps with Aurelia - Webinar Slides

Guillermo [email protected]

Hugo Marcelo Del Negro [email protected]

Cont

act u

s!