Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Web Development with New Framework
Rating: 4.0 out of 5(55 ratings)
15,758 students

Web Development with New Framework

Aurelia is a JavaScript client framework for web, mobile and desktop.
Created byeduCode Forum
Last updated 2/2019
English

What you'll learn

  • Learn about Application Structure, ES6 and ES7, Components of Aurelia Application, Component Life Cycle, Data Binding, Custom Elements, Dependency Injections
  • Learn about web and mobile app development using open source UI framework Aurelia JS.

Course content

10 sections211 lectures26h 0m total length
  • Introduction to UI Framework7:30

    Explore Aurelia, a modern open-source UI framework for web and mobile apps, enabling lean modular JavaScript and component-based architecture focused on web standards.

  • Installation of Aurelia CLI9:08

    Install Aurelia CLI by understanding the command line interface, Node.js, and npm, then create a new project and install dependencies to set up the Aurelia web application.

  • Application Structure of Aurelia JS9:50

    Explore the Aurelia app structure, including folder layout, package.json and node_modules, index.html, loader configuration, and the source folder with view and model logic.

  • Features of ES6 and ES710:17

    Explore ES6 and ES7 features, including classes, modern scoping, template strings with interpolation, decorators, and async patterns, demonstrated through dependency injection and TypeScript compatibility.

  • Components of Aurelia7:58

    Create Aurelia components as building blocks that combine a model and a view, using a view model in JavaScript or TypeScript, binding header and content in templates.

  • Components Life Cycle7:02

    Explore the component life cycle from constructor initialization through created, binding, attachment, detachment, and unbind, and learn how owning view and my view interact with binding contexts.

  • Data Binding11:50

    Explore how Aurelia implements data binding with one-way and two-way bindings, one-time bindings, string interpolation, and repeat structures to synchronize view and view-model data.

  • Data Binding Scenarios8:58

    Learn Aurelia binding behavior and data binding scenarios, including throttle to slow updates, the bone structure that updates after typing stops, and one-time binding.

  • Types of Packs in Skeleton Navigation8:01
  • Working with Main Dot JS6:02

    Import and configure modules, styles, and bootstrap in the main dot js file to start the app, set routing, and define the navigation bar with pages like GitHub users.

  • Creation of Custom Elements7:36

    Discover how to create and reuse custom elements, build dynamic components, and render header and content by wiring templates and calls across a web app.

  • Dependency Injections Library5:51

    Explore how dependency injection removes hardcoded dependencies by injecting a dependency into a class using a library and annotations, then run the project to see the console output.

  • Configuring Aurelia Framework4:58

    Configure Aurelia framework from basic to advanced settings, covering default configurations, configure code, environment libraries, root access, development logging, and event aggregator setup.

  • Installation of Standard Plugins8:05

    Learn to install and configure standard and official plugins in web development, covering default binding language, routing, localization, virtualization, and data validation in a practical workflow.

  • Binding Mechanism6:15
  • Events of Aurelia JS5:47
  • Events Aggregator Functionality9:36

    Explore event aggregator functionality in Aurelia to publish events, subscribe listeners, detach subscribers, and observe payloads via a view with three buttons.

  • Text Input in Forms4:58

    Create a template form with text inputs for email and password, add labels and placeholders, bind values, include a submit button, and implement signup logic.

  • Checkbox in Forms9:02

    Learn how to implement checkbox and radio inputs from scratch in a web form, handle submission, track checked values, and log selections to the console for immediate feedback.

  • Understanding Aurelia Converters5:56

    Explore Aurelia converters and value converters to format dates and currencies, install the required libraries with npm, and implement a date format value converter in your app.

  • Installing Numeral Library6:11

    Install the numeral library in a framework to enable currency formatting, run project on localhost to view currency values updating each second, and explore the history concept for tracking formats.

  • Aurelia History Plugin11:21

    Install and configure the Aurelia history plugin, then build routes and components for home and about pages and implement back and forward navigation with a history object.

  • Routing6:30

    Explore routing in Aurelia by configuring routes with config objects, modularity, fragments, and navigation strategies to control the viewport output and dynamic module activation.

  • Implementing Routing10:14

    Implement routing by scaffolding a routing folder, creating components and pages such as home and about, wiring view models, and configuring navigation with redirects and explicit routes.

  • Aurelia Best Practices6:24

    Explore aurelia best practices by selecting skeleton frameworks, installing packages with npm, and understanding folder structures, devops standards, and web standards for up-to-date web applications that support TypeScript and bundling.

  • Demo Project7:17

    Explore a demo Aurelia project that builds a contact list app, covering requirements, npm install, configuration, and viewing contact details on localhost:9000.

  • Understanding Configuration8:42

    Explore configuration fundamentals by examining template structures, embedded components, and data binding, then learn how routing, dependency injection, and API construction power the contact module.

  • Contact Details6:41

    Learn how contact details are built with bootstrap form controls for first name, last name, email, and phone, binding data to JSON and triggering events via an activity flow.

  • Contact List Dot HTML10:13
  • Analysis On Output3:38

    Analyze the project output by inspecting view model associations and contact interactions, noting console status and unsaved changes. Review the readme and dependencies to understand the architecture and guidance for the new framework.

Requirements

  • Basic knowledge of JavaScript
  • Performing web application development
  • working knowledge with HTML

Description

Aurelia is a JavaScript client framework for web, mobile and desktop. It allows you to write clean, modular JavaScript. The framework follows simple conventions and is focused on web standards. Through these tutorials we shall learn about web and mobile app development using open source UI framework Aurelia JS.

The training will include the following;

  • Introduction and Overview of AureliaJS

  • Environmental SetUp

  • Application Structure

  • ES6 and ES7

  • Components of Aurelia Application

  • Component Life Cycle

  • Data Binding

  • Custom Elements

  • Dependency Injections

  • Basic Configuration

  • Binding Behavior

  • Plugins

  • Converters

  • Events

  • Event Aggregator

  • Forms

  • HTTP

  • Refs

  • Routing Life Cycle

  • Routing Implementation

  • History

  • Animations

  • Dialog

  • Localization

  • Tools

  • Bundling

  • Debugging

  • Community

  • Best Practices

  • Sample Project description – An Aurelia sample app that lets you browse and edit contacts.

Who this course is for:

  • Web developers
  • Students
  • Someone who wants to learn about Aurelia framework