Frontend Development With Angular
5 days
Overview
Server-side developers (Java, .NET, and others) usually find the web platform as a mess. Some parts look quite interesting and advanced and some parts look like they were invented a decade ago.
Becoming a FED (Front End Developer) is a journey. First, we discover the power (and limitations) of the JavaScript programming language. Second, we explore browser APIs like DOM, AJAX, and HTML5 features. Last, we integrate them all into a modern client-side framework like Angular.
During this 5-day course, we will learn and deep-dive into every major concept that is a must for a serious FED. At the end of the course, you will be able to develop rich client-side web applications using the latest web technologies.
Prerequisites
- Good familiarity with one of the OOP popular languages like Java or C#
- Basic familiarity with JS
- Basic familiarity with WEB world including HTTP, CSS, HTML
Audience
Developers who want to get into Frontend development with Angular.
Course Content
JavaScript
Pitfalls
- Type of operator
- Undeclared vs. uninitialized
- Implicit variable declaration
- Strict vs. abstract comparison
- Arrays pitfalls
- Where to declare variables
- Apply & call
- Self-executing function
- Module pattern
- Strict mode
Advanced
JavaScript
- From module to class
- Module pattern memory consideration
- Function as a constructor
- New operator
- Prototype
- Prototypical inheritance
The DOM
- What is a DOM
- DOM query
- DOM manipulation
- Event Handling
- Event propagation
- DOM selection, traversal & creation
- jQuery
CSS
- The Big Three
- CSS Versions
- Linking vs. Embedding vs. Inline
- Importing
- Cascading
- CSS Selectors
- Pseudo class & Pseudo element
- How to calculate specificity
- !important
- Inheritance
- Box Model
- box-sizing
- Colliding Margin
- Inline vs. Block Element
- Line Box
- Floating
- Positioning
- Which size unit to use
- Introduction to SASS
Ajax
- What is AJAX?
- XMLHTTP Request
- Threading Model
- Fetch API
- Cache Killer
- Working with JSON
- JSON Limitations
- Same Origin Policy
- JSONP
- CORS
- Promise & Deferred
HTML5
- What is HTML5?
- W3C vs. WHATWG
- What’s New
- History API
- Web Storage
- IndexedDB
- File API
- Form Validation
- Web Workers
- Web Sockets
- Offline Web Applications
Angular
- What is a SPA
- Popular SPA Frameworks
- Getting Started using @angular/cli
- Writing a simple component
- Styling a component
- Parent/child component interaction
- Custom provider
- Dependency injection
- Sibling components interactions
- Understand change detection
- Component lifecycle hooks
- Testability using Jasmine & Protractor
- Introduction to Angular Material
- Communicating with an API
- Managing auth
