build amazing apps with aurelia - webinar slides
TRANSCRIPT
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