Upload
belatrix-software
View
199
Download
2
Embed Size (px)
Citation preview
Build amazing apps with Aurelia
WEBINAR
Guillermo Eyherabide.Net developer
Hugo Marcelo Del Negro Software Engineer
Javascript is the most popular language
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
What about support?Durandal INC. provides commercial support and trainings…
QUESTIONS #AureliaApps
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
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.
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)
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
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
The View-ModelIt contains data and behavior
QUESTIONS #AureliaApps
The View-ModelQUESTIONS #AureliaApps
The ViewHTML file where data binding against the view-
model happen…
QUESTIONS #AureliaApps
The ViewQUESTIONS #AureliaApps
The RouterMake the navigation happen.
The Router
Router-view: It is an Aurelia custom-Element where the current navigation screen will be rendered.
QUESTIONS #AureliaApps
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
The dependency Injection ContainerQUESTIONS #AureliaApps
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
Binding: Value Converter QUESTIONS #AureliaApps
Binding: Value Converter QUESTIONS #AureliaApps
Templating: Custom AttributesCustom Attributes are used to add custom behaviors to DOM
elements.
Templating: Custom Attributes QUESTIONS #AureliaApps
Templating: Custom ElementsCustom Elements are used to add custom components to
Aurelia Applications.
QUESTIONS #AureliaApps
Templating: Custom Elements QUESTIONS #AureliaApps
Event AggregatorEvent Aggregator should be used when your events needs to be attached to more listeners or observe some functionality.
QUESTIONS #AureliaApps
Event Aggregator QUESTIONS #AureliaApps
Event Aggregator QUESTIONS #AureliaApps
Q&A
QUESTIONS #AureliaApps