Cover image for Learning Aurelia

Learning Aurelia

Author Manuel Guilbault
Release Date: 2016/12/01
ISBN: 9781785889677
Topic:
0%
89
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Harness the power of the next-generation JavaScript Framework, Aurelia, and start creating apps that really set you apart

About This Book

  • Develop well-designed, decoupled, and testable single-page applications with Aurelia
  • Leverage the latest web standards to increase code performance, readability, and cross-compatibility
  • Understand how Aurelia is organized and use its innovative MVC approach to design professional-quality web apps

Who This Book Is For

This book is for JavaScript developers who want to build modern web apps with Aurelia. No prior knowledge of Aurelia is needed.

What You Will Learn

  • Build a modern single-page web application
  • Understand the workflow of an Aurelia application
  • Design reusable web components, which can be shared and integrated into various frameworks and libraries
  • Write clean, modular, and testable code that will be easy to maintain and evolve
  • Use all the latest?and even future?web standards, so the application gathers minimal technical debt

In Detail

Aurelia is one of the most promising new JavaScript frameworks for mobile, desktop, and web, which makes developing powerful, modern web applications a straightforward task. Its power lies in its simplicity and clear workflow that enables developers to build next-generations apps for the web with ease.

From initial structuring to full deployment, this book will serve as a step-by-step guide to develop a modern web application from scratch with the Aurelia framework. In addition to including a comprehensive coverage of various Aurelia framework features, this book will also show you how to utilize these features in the real world to develop a professional single-page web application. You'll see how to make the most out of Aurelia by understanding the Aurelia workflow and then applying it in real-world development tasks. By the end of the book, you will have learned to develop a clean and maintainable application in Aurelia from scratch.

Style and approach

This book will show you how to leverage the cutting edge features of Aurelia framework to develop modern web apps with a clear workflow. Using the modern architecture and features of Aurelia, this book will demonstrate the development of a web application from scratch.

Table of Contents

  1. Learning Aurelia
    1. Learning Aurelia
    2. Credits
    3. About the Author
    4. About the Reviewer
    5. www.PacktPub.com
      1. Why subscribe?
    6. Customer Feedback
    7. Preface
      1. What this book covers 
      2. What you need for this book 
      3. Who this book is for 
      4. Conventions 
      5. Reader feedback
      6. Customer support
        1. Downloading the example code 
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started
      1. Terminology
      2. Core concepts
        1. Conventions
        2. Components
      3. Architecture
        1. Core features
        2. Abstraction layers
        3. Default implementations
        4. Integration layers
        5. Additional tools and plugins
      4. Tooling
        1. Node.js and NPM
        2. The Aurelia CLI
          1. Installing the CLI
      5. The project skeletons
        1. Our application
        2. The structure of a CLI-based project
          1. The aurelia.json file
          2. Tasks
          3. Generators
          4. Environments
        3. The structure of an Aurelia application
          1. The hosting page
          2. The main module
          3. The root component
        4. Conventional bootstrapping
        5. Customizing Aurelia configuration
      6. Summary
    9. 2. Layout, Menu, and Getting Familiar
      1. Dependency injection
        1. The inject decorator
        2. TypeScript and autoinject
        3. The static inject method or property
        4. Root and child containers
        5. Resolving an instance
        6. Lifetime
        7. Registration
          1. The container registration API
          2. Automatic registration
          3. Registration strategies
          4. Creating a custom registration strategy
        8. Resolvers
          1. Lazy
          2. All
          3. Optional
          4. Parent
          5. Factory
          6. NewInstance
      2. The plugin system
        1. Plugins
          1. An example
          2. Registering global resources
        2. Features
      3. Logging
        1. Configuration
          1. Default configuration
        2. An appender
        3. Writing logs
      4. Routing
        1. Configuring the router
        2. Declaring routes
          1. Redirection route
          2. Navigation strategies
        3. Laying out our application
          1. Trying it out
        4. The screen activation life cycle
        5. Navigation commands
        6. Handling unknown routes
          1. Conventional routing
        7. Activation strategies
        8. Child routers
        9. Pipelines
        10. Events
        11. Multiple viewports
        12. Push state versus hash change
        13. Generating URLs
          1. In code
          2. In views
        14. Navigating
      5. Summary
    10. 3. Displaying Data
      1. Templating basics
        1. View resources
          1. Locally loading resources
          2. Resource types
        2. Loading CSS
      2. Data binding
        1. Binding modes
        2. String interpolation
        3. Data binding commands
          1. bind
          2. One-way
          3. Two-way
          4. One-time
          5. trigger
          6. delegate
          7. call
          8. ref
        4. Binding literals
        5. Using built-in binding context properties
        6. Binding to DOM properties
          1. innerhtml
          2. textcontent
          3. style
          4. scrolltop
          5. scrollleft
      3. Using built-in behaviors
        1. show
        2. hide
        3. if
        4. repeat.for
          1. Binding to a map
          2. Repeat n times
          3. Repeating templating
          4. Contextual variables
        5. The with attribute
        6. The focus attribute
        7. The compose element
          1. Rendering a view-model
          2. Passing activation data
          3. Rendering a template
      4. Value converters
        1. Using value converters
          1. Passing a parameter
          2. Passing multiple parameters
          3. Passing context variables as parameters
          4. Chaining
        2. Implementing a value converter
      5. Binding behaviors
        1. Using binding behaviors
          1. Passing parameters
        2. Built-in binding behaviors
          1. oneTime
          2. throttle
          3. debounce
          4. updateTrigger
          5. signal
      6. Computed properties
        1. computedFrom
      7. Fetching data from an endpoint
        1. The Fetch API
        2. Using the Fetch client
        3. Configuration
          1. A common pitfall
        4. Interceptors
      8. Our application
        1. Our contact gateway
          1. Prerequisites
        2. Displaying the contacts
        3. Grouping and sorting the contacts
          1. Creating the orderBy value converter
          2. Creating the groupBy value converter
          3. Updating the contact list
        4. Filtering contacts
        5. The contact detailed view
          1. The view-model
          2. The template
      9. Summary
    11. 4. Forms, and How to Validate Them
      1. Binding to form inputs
        1. select elements
          1. Multi-selection
          2. Matchers
        2. input elements
          1. File pickers
          2. Radio buttons
          3. Checkboxes
        3. textarea
        4. Disabling an element
        5. Making an element read-only
      2. Adding forms to our application
        1. Adding new routes
        2. Adding links to the new routes
        3. Updating models
        4. Creating the form component
          1. Activating the view-model
          2. Building the form layout
          3. Editing scalar properties
          4. Editing phone numbers
          5. Adding the missing method
          6. Editing the other lists
          7. Saving and canceling
        5. Sending data with fetch
        6. Uploading a contact's photo
          1. Building the template
          2. Creating the view-model
          3. Uploading files with fetch
        7. Deleting a contact
      3. Validation
        1. Installing the library
        2. Configuration
        3. Validating the contact form
          1. Setting up the template
          2. Using ValidationController
          3. Adding ValidationRules
        4. Rendering validation errors
          1. The errors property
          2. The validation-errors attribute
          3. Creating a custom ValidationRenderer
        5. Changing the validation trigger
        6. Creating custom ValidationRules
          1. Validating a date
          2. Validating that files are selected
          3. Validating the size of files
          4. Validating file extensions
          5. Validating the contact photo selector
      4. Editing complex structures
        1. Installing the dialog plugin
        2. Creating the edition dialogs
        3. Using edition dialogs
      5. Summary
    12. 5. Making Reusable Components
      1. Composition
        1. Splitting the contact edition component
        2. Reusing templates
        3. Reusing components
      2. Using a template as a custom element
      3. Understanding HTML behaviors
        1. Injecting the DOM element
        2. Declaring bindable properties
        3. Change handler methods
        4. Life cycle
      4. Custom attributes
        1. Declaring a custom attribute
        2. Attributes with a single value
          1. Adding an image preview
          2. Adding a file drop target
        3. Attributes with multiple properties
          1. Using a custom attribute with multiple properties
        4. Attributes with dynamic properties
          1. Using a custom attribute with dynamic properties
      5. Custom elements
        1. Declaring a custom element
        2. Creating a file picker
          1. Declaring the custom element
          2. Using the custom element
        3. Validating custom elements
        4. Surrogate behaviors
        5. Content projection
          1. The default slot
          2. Named slots
          3. Data-binding projected content
          4. Default content
          5. Slots in slots
          6. Mixing named slots with a default slot
          7. Slot-ception
          8. Limitations
        6. Template injection
          1. Creating a group list
          2. Using the group list
          3. Default template part
          4. Re-scoping binding context
          5. Creating a list editor
          6. Using the list editor
        7. Using the customization decorators
          1. viewResources
          2. useView
          3. inlineView
          4. noView
          5. useViewStrategy
          6. processAttributes
          7. processContent
          8. containerless
          9. useShadowDOM
          10. children
          11. child
      6. Bonus – preventing multiple submits
        1. Creating the submit task attribute
        2. Using the submit task attribute
        3. Creating the submit button
        4. Using the submit button
      7. Customizing the view location strategy
        1. Changing the convention itself
        2. Changing the strategy for a single component
      8. Summary
    13. 6. Design Concerns - Organizing and Decoupling
      1. Re-organizing our application
        1. Refactoring the structure
          1. Breaking the models down
          2. Isolating the gateway
          3. Grouping the components
          4. There is no silver bullet
        2. Leveraging child routers
          1. Changing the root routes
          2. Configuring the contacts child router
          3. Implications
        3. Declaring root routes in a feature
          1. Creating the feature
          2. Changing the root routes
          3. Reducing coupling on the feature
          4. Implications
        4. Why not both?
      2. Decoupling components
        1. Using data binding
        2. Using remote services
        3. Using events
          1. The event aggregator
          2. Extending an object with events
          3. Using event classes
          4. Creating an interactive connection
          5. Adding notifications
          6. Getting out of the pitfall
          7. Simulating a multi-user scenario
        4. Using shared services
          1. Creating an in-memory store
          2. Using the store
      3. Summary
    14. 7. Test All the Things
      1. Unit tests
        1. Running unit tests
        2. Configuring validation
        3. Configuring Bluebird warnings
        4. Unit-testing models
          1. Testing static factory methods
          2. Testing computed properties
        5. Unit-testing services
          1. Removing configuration from the gateway constructor
          2. Testing read methods
          3. Testing write methods
        6. Unit-testing value converters
        7. Unit-testing custom elements and attributes
          1. The component tester
          2. Testing the file-drop-target attribute
          3. Testing the list-editor element
        8. Unit-testing route components
      2. End-to-end tests
        1. Setting things up
        2. Mocking the backend
        3. The page object pattern
        4. Writing a first test case
        5. Running tests
        6. Testing the contacts list
        7. Testing contact creation
        8. Further testing
      3. Summary
    15. 8. Internationalization
      1. Setting things up
        1. Installing the libraries
        2. Configuring the plugin
        3. Creating the translation file
        4. Polyfilling the Intl API
      2. Getting and setting the current locale
      3. Translating
        1. Using attributes
          1. Passing parameters
        2. Using the value converter
          1. Passing parameters
        3. Using the binding behavior
          1. Passing parameters
        4. Using code
        5. Choosing one technique over another
      4. Formatting numbers
        1. Using the value converter
        2. Using the binding behavior
        3. Using code
      5. Formatting dates
        1. Using the value converter
        2. Using the binding behavior
        3. Using code
      6. Formatting relative time
        1. Using the value converter
          1. Periodically refreshing the value
        2. Using code
      7. Translating our contact management application
      8. Integrating with validation
        1. Overriding ValidationMessageProvider
        2. Adding the translations
        3. Refreshing validation errors
      9. Integrating with the Router
      10. Segregating translations by feature
      11. Summary
    16. 9. Animations
      1. The Animator API
      2. The CSS animator
        1. Installing the plugin
        2. Animating view transitions
          1. Animating the list-editor
        3. Manually triggering an animation
          1. Emphasizing validation errors
        4. Animating route transitions
          1. Swap order
      3. Summary
    17. 10. Bundling for Production
      1. Configuring bundles
        1. Merging the application in a single bundle
        2. Splitting the application into multiple bundles
      2. Versioning bundles
      3. Deploying the application
      4. Summary
    18. 11. Integrating with Other Libraries
      1. Using Bootstrap widgets
        1. Loading the library
        2. Creating a bs-tooltip attribute
          1. Using the attribute
        3. Creating a bs-datepicker element
          1. Installing the bootstrap-datepicker plugin
          2. Creating the custom element
          3. Using the element
        4. Internationalizing the bs-datepicker element
          1. Reconfiguring bundling of jQuery and Bootstrap
          2. Updating the element
      2. Using jQuery UI widgets
        1. Installing the libraries
        2. Creating a jq-tooltip attribute
      3. Using SASS instead of CSS
        1. Replacing CSS with SASS
      4. Dragging and dropping with sortable
        1. Installing the library
        2. Adding drag and drop to list-editor
      5. Drawing graphs with D3
        1. Installing the library
        2. Prepping the application
        3. Creating the contact-address-tree custom element
      6. Using Polymer components
        1. Installing the libraries
        2. Configuring the application
        3. Displaying a Google map
        4. Geocoding addresses
        5. Displaying a marker
      7. Summary
    19. A. Using JSPM
      1. Getting started
      2. Running tasks
        1. Running unit tests
        2. Running end-to-end tests
      3. Adding libraries
      4. Bundling
        1. Configuring bundles
      5. Summary
    20. B. Using Webpack
      1. Getting started
      2. Running tasks
      3. Adding libraries
      4. Bundling
        1. Lazy-loading bundles
        2. Environment-based configuration
      5. Summary
3.22.216.71