What Will I Learn?

We will review the tools every frontend developer should know, and dive into implementing a scalable Angular application.

Weather you've worked with Angular 1.x, or not, the strength of Angular 2 will amaze you.


You will experience that Angular embraces:


Lessons learned from Angular1 goodies and baddies

Better attention to state management and Ideas like Flux (with Redux)

Immutability as a friend

Super Angular

TypeScript to create codebases and development teams that scale

Reactive programing with RxJS built into the framework

Best Practices for modern frontend development



Warranty: Getting a hold of those super-powers will enable you to build outstanding frontends!

The Staff

Roni Krakover

Frontend developer, Project manager and the Marketing lead at misterBIT

Yaron Biton

Professional trainer ; misterBIT CTO ; Building the web for over 20 years ; Deep understanding of web technologies, aspects and evolvement ; Expert in building powerful, scalable and secure software ; Mamram graduate

Nadav Sinai

Fullstack Web Developer and more. with varied experience and knowledge in many programming environments, the Mobile world, Linux and other OSs,Networking, design and art.

Zohar Lederer

Rock solid experience helping individuals, teams and organization to achieve excellence

We are here to help you make the best of your coding time!

The Plan


Javascript is everywhere today and writing large scale applications with it has been through much progress.

In order to use Frameworks such as Angular to build large scale apps for future generations, one will need to use modern Javascript, apply many best practices and adhere to techniques such as: TypeScript, Reactive programming using Observables, Immutability and more.

In this track we progress through a set of power sessions and get our hands on the practical usage of those tools.

This workshop has 3 parts. We recommend participating in all 3, but you are free to choose the ones that best fit your needs:

1 - Intro to Angular Techs (1 Day)

Angular 2 is built in Typescript and uses reactive principals and building blocks such as Subjects and Observable, during this day we will practice those two super powers.

2 - Building Modern Apps with Angular (3 Days)

Getting a deep look into Components, Pipes, Services, Forms, Routing, Http, Dependency Injection, Component lifecycle, Content projections and other communications.

3 - Mastering Angular (2 Days)

Modules types, project structuring, debugging and testing, change detection and data flows (Redux), advanced forms, advanced RxJS, advanced routing and Async Loading, Tips and Tricks!

Angular Workshop

Read the full syllabus

Modern Frontend development and Angular

Review the current state of frontend development and single page web applications, task runners, module loaders, ES6, Modular CSS & SASS, and setup our initial project

Day 1
Kicking Off

Practical Typescript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

It's a productivity booster, a code-quality enabler and the most elegant way to get dependency injection in Angular

  • TypeScript Language Features
  • The Type System
  • Interfaces, Classes and Generics
  • Running TypeScript in a Browser
  • Exceptions, Memory, and Performance
  • Building Declaration files
Day 1
Setting the ground

Stream programming with RxJS

From Promises to Observables – Rx.js is the Reactive Extensions for JavaScript, an API for asynchronous programming, built-in the Angular framework's APIs: Form controls, route params and server communications all work with Observable streams.

In this session we will examine the most important operators you should know about and unleash the force of functional reactive programming.

Day 1
Setting the ground

Directives & Components

Introducing the component as the core primitive building block of the application

  • SPA and MVC in Angular
  • The Module system
  • Directives & Components
  • Template Syntax
Day 2
Understanding Components

Binding, events, forms, pipes

Understand the nitty-gritty of the most important concepts of the framework

    Templates

  • Expressions & Statements
  • One way binding and Two-way data binding
  • Event listeners
  • Components styling encapsulation
  • Templates variables
  • Built-in directives

    Components & Directives

  • Attribute Directives, Structural Directives & Components
  • Using components Input & Output
  • Component life cycle hooks
  • Host and Views

    Using and Building Pipes

  • Built in pipes
  • Chaining and parameterizing
  • Custom pipes
  • Stateful (un-pure) pipes
  • Asynchronous pipes
  • Built-in directives
Day 2
Hooking it up

Dependency Injection

The DI system that comes with Angular is one of the most beautiful pieces of codes we've seen, let's get excited.

  • Deep look into the DI system
  • Working with the injector
  • Factories and Injectables
  • Mocking Injections for Unit Testing
  • Overriding behaviors with Child Injectors
  • Advanced use cases
Day 3
Injecting stuff

Component's Communication

It’s sometimes desired to interact with other components such as the host, the children or projected content. Let's review some useful ways to achieve that.

Day 3
Components Relationships

Life cycle hooks

The inversion of control design pattern in at the roots of Angular, so knowing which hooks are available for us to tap into key moments is important.

Day 3
Hanging on hooks

Server Communication

Awake our frontend by communicating with servers using XHR, JSONP, we will use Observables and also look into Building real time apps using web sockets.

Day 4
Talking to servers

Basic Routing & Navigation

Single Page applications are becoming the standard for modern UX, lets unlock the power of the component's router

  • Navigation overview
  • Using Router-Outlets and Router links
  • Using the Router and Location
Day 4
Route to other dimensions

Simplified Forms

  • Building forms, and using Controls
  • Validations and Messages
  • Tracking and communicating changes
Day 4
Basic Forms

Project Best Practices

Component types, module types, structuring your bits right

Day 5
Structure Matters

Testing

Debugging & testing tools for Angular

Day 5
Testing is Caring

Into the Change Detection

Tracking changes over time and reflecting them efficiently is the key for having a rich, flowing, real time application.

Day 5
Detecting Changes

Data Flow

In the past it was not uncommon to have bits and pieces of state strewn across our application tucked inside of controllers, services, routes, directives, and templates. When the application grows, this approach is hard to scale.

In this session we will dive into state management and one way data flows, immutability, stores and Redux.

Day 5
All about your state

Advanced Forms

Day 5
Mastering Forms

Build & AoT

Demystifying Ahead-Of-Time Compilation In Angular

Day 6
Preparing for production

Tips & Use Cases

Having a look at some real life use cases can be enlightening

Day 6
Good ideas and better ones

Advanced routing and Async Loading

Preloading, Lazy loading, asynch routes, guards, hooks and resolvers!

Day 6
Getting serious with routes

Upgrading apps from Angular 1.x to Angular 2

Understand the conceptual shifts from Angular 1 and understand how to continue using Angular 1, in a way that is easier to upgrade to Angular2

  • Best practices to prepare for a smooth migration
  • Avoiding scope
  • From Directives to Components
  • Data flow
Day 6
Bringing older code to the table

A brave look at the future

The frontend scene is changing, as HTML, CSS and Javascript are used to build web apps, server side, mobile, desktop, robots and what not.

In this session we will look at different standards, libraries and tools, and how Angular will play part in the future of frontend.

Day 6
Gazing at the future

Get the job done

We are putting a lot of effort to make this workshop the best it can be, and capture the most important ideas and coding practices in modern frontend development. We help developers use the newly-born-super-powers of web technologies to get the job done. Expect to leave this workshop with a heap of useful examples and resources.

Get Ready

We will rely on the foundations of HTML, CSS and Javascript, they will be the dance floor upon which we will play with angular and friends, if you are converting from other technologies, we suggest you (1) get excited and (2) get a hold of those technologies. If you need some help and guidance, just let us know.

Tailored training

We have trained tons of developers and helped companies build up their teams and knowledge for over twenty years. We also provide on-site tailored sessions designed to meet your special needs, please contact us for any question, or provide your details below and we will get back to you shortly.

Contact Us

and we will be with you shortly