build amazing apps with aurelia - webinar slides
TRANSCRIPT
![Page 1: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/1.jpg)
Build amazing apps with Aurelia
WEBINAR
![Page 2: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/2.jpg)
Guillermo Eyherabide.Net developer
Hugo Marcelo Del Negro Software Engineer
![Page 3: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/3.jpg)
Javascript is the most popular language
![Page 4: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/4.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/5.jpg)
What about support?Durandal INC. provides commercial support and trainings…
QUESTIONS #AureliaApps
![Page 6: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/6.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/7.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/8.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/9.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/10.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/11.jpg)
The View-ModelIt contains data and behavior
QUESTIONS #AureliaApps
![Page 12: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/12.jpg)
The View-ModelQUESTIONS #AureliaApps
![Page 13: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/13.jpg)
The ViewHTML file where data binding against the view-
model happen…
QUESTIONS #AureliaApps
![Page 14: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/14.jpg)
The ViewQUESTIONS #AureliaApps
![Page 15: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/15.jpg)
The RouterMake the navigation happen.
![Page 16: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/16.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/17.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/18.jpg)
The dependency Injection ContainerQUESTIONS #AureliaApps
![Page 19: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/19.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/20.jpg)
Binding: Value Converter QUESTIONS #AureliaApps
![Page 21: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/21.jpg)
Binding: Value Converter QUESTIONS #AureliaApps
![Page 22: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/22.jpg)
Templating: Custom AttributesCustom Attributes are used to add custom behaviors to DOM
elements.
![Page 23: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/23.jpg)
Templating: Custom Attributes QUESTIONS #AureliaApps
![Page 24: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/24.jpg)
Templating: Custom ElementsCustom Elements are used to add custom components to
Aurelia Applications.
QUESTIONS #AureliaApps
![Page 25: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/25.jpg)
Templating: Custom Elements QUESTIONS #AureliaApps
![Page 26: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/26.jpg)
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](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/27.jpg)
Event Aggregator QUESTIONS #AureliaApps
![Page 28: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/28.jpg)
Event Aggregator QUESTIONS #AureliaApps
![Page 29: Build amazing apps with Aurelia - Webinar Slides](https://reader035.vdocument.in/reader035/viewer/2022062522/589d24941a28abeb478b53e3/html5/thumbnails/29.jpg)
Q&A
QUESTIONS #AureliaApps