Today it is critical for organizations to create and develop rich user experiences. Aurelia is a next generation Javascript framework – or in other words, it is a powerful framework to enable you to build amazing apps. In this webinar, Belatrix experts Hugo Marcelo Del Negro and Guillermo Eyherabide, explain what is Aurelia and how you can take advantage of it.

1. Build amazing apps
with Aurelia
WEBINAR

2. Guillermo Eyherabide
.Net developer
Hugo Marcelo Del Negro
Software Engineer

3. Javascript is the most popular language

4. 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

5. What about support?
Durandal INC. provides commercial support and trainings…
QUESTIONS
#AureliaApps

6. 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

7. 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.

8. 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)

9. 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

10. 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

11. The View-Model
It contains data and behavior
QUESTIONS
#AureliaApps

12. The View-Model
QUESTIONS
#AureliaApps

13. The View
HTML file where data binding against the view-
model happen…
QUESTIONS
#AureliaApps

14. The View
QUESTIONS
#AureliaApps

15. The Router
Make the navigation happen.

16. The Router
Router-view: It is an Aurelia custom-Element where the current navigation screen
will be rendered.
QUESTIONS
#AureliaApps

17. 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

18. The dependency Injection Container
QUESTIONS
#AureliaApps

19. Binding: Value Converter
A 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

20. Binding: Value Converter QUESTIONS
#AureliaApps

21. Binding: Value Converter QUESTIONS
#AureliaApps

22. Templating: Custom Attributes
Custom Attributes are used to add custom behaviors to DOM
elements.

23. Templating: Custom Attributes QUESTIONS
#AureliaApps

24. Templating: Custom Elements
Custom Elements are used to add custom components to
Aurelia Applications.
QUESTIONS
#AureliaApps

25. Templating: Custom Elements QUESTIONS
#AureliaApps

26. Event Aggregator
Event Aggregator should be used when your events needs to
be attached to more listeners or observe some functionality.
QUESTIONS
#AureliaApps

27. Event Aggregator QUESTIONS
#AureliaApps

28. Event Aggregator QUESTIONS
#AureliaApps

29. Q&A
QUESTIONS
#AureliaApps

30. Guillermo Eyherabide
geyherabide@belatrixsf.com
Hugo Marcelo Del Negro
hdelnegro@belatrixsf.com
Contactus!