Front-end world from an “Angular” perspective

A brand new 7 weeks training is coming on Jan 18, 2018
Supported by Mentormate

Meet Angel Nikolov,

Software Development Lead – Front-End

“A good programmer is someone who looks both ways before crossing a one-way street.”

Info

Overview

An in-depth course covering most of the popular techniques for creating rich, maintainable and predictable user interfaces. 

The course will be structured as 7 x 2.5 hrs live-coding lectures in which field experience will be shared by creating a medium scale project from scratch.

There will be optional homework which will be entirely and only based on the passed lecture.

Gitlab group will be created for those purposes where the lecturer can facilitate code reviews and guidance.

Note: The lectures will be in Bulgarian.

The participants are nice to have:

  • Experience with any front-end framework (Angular, React, Ember, Vue)
  • Experience with Typescript (interfaces, generics, inheritance)
  • Understanding of FE build tools (CLIs, Webpack, npm)
  • Experience with basic unit testing in any language
  • Motivation and time

Video Overview

Skills

After this course you will

Know how to set up
a medium scale project
Understand how to solve
practical problems within a real
project and not arbitrary tasks
Be familiar with current
best practices of creating
applications
Get to know best practices
around state management
in a Front-End application
Get basic understanding
of how Angular works
internally
Use some tools that you
might not have heard of
Prepared for...

Schedule

Foundations

  1. The Framework-agnostic state of FE in 2017
  2. Tooling – once a choice, now necessary
    1. Languages
    2. Compilers
    3. Linters/ Build tools/ CLI/ Enforceable styleguides
    4. IDEs
    5. Test tools
  3. Components, components, components
    1. Module systems
    2. Components composition
    3. Component types
    4. State management
    5. Rules of thumb – reusability, encapsulation, ease of use
  4. Typescript overview
    1. Statically analysis – lexers, parsers, transformers, transpilers, type checkers
    2. Typescript compared to ES6/7
    3. Decorators
  5. Angular CLI
    1. Project scaffolding
    2. Project structure and generated bundles exploration
    3. Building, serving and optimizing
  6. Other setup
    1. Folder Structure
    2. Styling type
    3. Linter rules
    4. TsConfig aliases
    5. Code Editor settings
  7. Angular Components and Modules
    1. Separation of concerns
    2. Modules concept
    3. CoreModule
    4. SharedModule
    5. Component Communication (Inputs, Outputs)
    6. Components Basic Styling
    7. Content Projection
    8. Creating container (stateful) and presentational (stateless) components
    9. Services/Directives/Pipes

Angular features

  1. Styling
    1. Encapsulation types
    2. Shadow dom, Shadow boundary piercing
    3. Reusable styles and styling methodologies
    4. Preprocessors
    5. 3rd party assets
  2. Routing
    1. Routing Modules
    2. Feature Modules/Lazy Loading
    3. Auxiliary routes, parameters
    4. Resolves
    5. Guards
    6. Preloading
    7. Using the title service in combination with Router
  3. Http
    1. Best practices
    2. Typed Responses
    3. HttpInterceptor

Angular internals

  1. Dependency Injection
    1. Why is it so nice to have it?
    2. Angular Implementation
    3. Interface based programming in the browser?
    4. Advanced dependency swapping techniques
  2. Zones
    1. NgZone
    2. Why did Angular choose it?
    3. Performance optimizations
  3. Data-binding and Change Detection
    1. Two vs one-way databinding
    2. Types of Change Detection
    3. Angular types of Change Detection

Forms and Animations

  1. Forms
    1. Declarative forms
    2. Form Validation and custom validators
    3. Custom Controls with Examples
    4. Reactive Forms and their advantages
    5. Nested Forms
    6. Cool tricks with valueChanges()
  2. Animations
    1. Web Animations API
    2. Angular’s DSL
    3. Actually controllable animations that are as performant as CSS ones
    4. Animation Callbacks
    5. Examples

Data Flow and State Management

  1. RxJs
    1. What is it all about?
    2. Rebuild it from scratch
    3. Build a custom autocomplete control with one stream and the power of operators
    4. How it fits in Angular and what we can use it for
  2. State Management
    1. Multi-leaf state management problems and mutability
    2. How to easily improve performance with immutability
    3. State management made easy with Redux
    4. Recreate it from scratch
    5. Redux concepts
    6. Powerful debugging with a showcase
  3. NgRx
    1. Combines the best from redux and ngrx
    2. Allows for sane state management by easily separating side effects from pure functions
    3. Exposes state as observable and utilizes the power of rxjs’s operators

Testing

  1. Why do we need it?
  2. Setting it all up
  3. Unit testing
    1. Mocking/Faking/Stubbing
    2. Unit testing Components and Pipes
    3. Unit testing Services
    4. Unit testing Side Effects
  4. E2E testing
    1. Protractor
  5. Running in CI
    1. Why?
    2. ChromeHeadless
    3. PhantomJS
  6. Differences between tests

Advanced Angular Concepts

  1. Performance optimizations via AoT
    1. AoT – code parsing and generation
    2. Hidden Classes
    3. Build optimization
    4. Interactive performance optimization
    5. Angular’s goal for the future
  2. General performance optimization guidelines
    1. Mindful imports
    2. Using tslint’s remove unused imports as an IDE config
    3. Sourcemaps explorer
    4. Modules structure
    5. Selective intent preloading techniques
  3. Server Side Rendering
    1. Why do we need it?
    2. Render the application on different platforms
    3. Example with express
    4. Client-side Hydration
  4. PWA
    1. Made easy with angular cli
    2. What we gain?
    3. Cool features
  5. Auto-Documentation

A bit more about the...

Trainer

Angel has more than 8 years of experience in the field of software development. Like many other Open Source Developers, he started with PHP, got through the woe of PSD-to-HTML to finally come around JavaScript 6 years ago and stay there until now. Angel is interested in new technologies and is constantly tracking the development of new features that might be useful in his work. He has proven track record of successful projects for medium and enterprise companies in the US in sectors like healthcare, childcare, finance, HR, education, IT and more. Currently, Angel leads a team of front-end developers at MentorMate.

In the past, Angel has led many seminars and workshops, including HowCamp (with his topic “AngularJS is cool”), MobCon Europe (“Optimize real-life application with devtools”), Front-end skills and DevTalks events across the whole country.

His “professional” career started in Varna, where he managed to sell over 2 tonnes of corn and ice cream in three years. Recognizing that there is no perspective in the latter, he went to England, where he studied Aerospace Engineering. Realizing how little he knew about both corn and planes, he went back to Bulgaria to pursue his hobby in computers.

During his work, Angel has mastered the following technologies:

Portfolio

Previous events

#DevTalks Tour 2017

July 1, 2017

Let’s talk about tech, baby! Let’s talk about you and us!
Let’s talk about #DevTalks

Thе event is created for developers by developers covering the full stack of software development and highlighting emerging technologies like Cloud and Virtual Reality.

We have gathered a variety of software innovators and thought leaders ranging from startups to enterprises covering all different disciplines of software development!

Let’s talk about tech, baby! Let’s talk about you and us!
Let’s talk about #DevTalks

Thе event is created for developers by developers covering the full stack of software development and highlighting emerging technologies like Cloud and Virtual Reality.

We have gathered a variety of software innovators and thought leaders ranging from startups to enterprises covering all different disciplines of software development!

Agenda:

  • You don’t need a server for that with Angel Nikolov, Software Development Lead, Front-end

Description: A talk about creating an Angular (4) based chat application on top of Google’s latest cloud infrastructure products like Firebase, Cloud Functions, Natural Language and Vision and of course a short chat at the end of the presentation

  •   Offline assets in the browser using archives with Alex Mihaylov, Software Development Lead, Front-end

Description: Archiving technologies exist for quite some time, and everybody has used one at some point. But more curious is how these technologies apply to the web? How are they being integrated into our web app? How can we extract data from the archive from inside our javascript code? You will learn about all the benefits.

  • Create virtual worlds on the Web with React VR with Denislav Ganchev, Senior Front-end Developer

Description: Use React components to create scenes in 3D and combine 360 panoramas with text, images, audio and video to create a whole new virtual web world.

  • “Core-ify” your ASP.NET web application with Panayot Todorov, Senior .NET Developer

Description: How and why to migrate your asp.net application to asp.net core. We will see how an application running on a Windows-based server can successfully be deployed and run on a Linux-based one.

 

  • Empowering the smart home with OpenHAB with Vasil Nonchev, Software Development Lead – Java

Description: We will have a quick dive into Home automation with the java based OpenHAB software. We will demonstrate how custom sensors using affordable electronics and very little knowledge of electronics can be built. The sensors will communicate through a MQTT publish-subscribe messaging framework. We will cover how OpenHAB is structured around Things, Items, Sitemap and Rules and create the configuration and a basic user interface for our sensor.

  • Blockchains – Practical applications for developers with Angel Venchev, .NET Developer

Description: What is a blockchain? How can it be used for things other than money? Etherium and smart contracts with solidity.

  • Where performance and quality meet With Stefan Shopov, QA Lead

Description: How we can do performance testing using cost effective solution, what is the process of establishing and validating effective and scalable software solutions.

  • Unleash the power of Automation testing with Miroslav Andonov, QA Lead

Description: Don’t automate hard, automate intelligent. I will tell you more about our Automation testing framework project. We will talk how is efficient to do automation testing and what is the best way to sell it.

  • SpecFlow: Closing the gap between stakeholders and development team with Georgi Ivanov, QA Lead

Description: A talk about how we can create human-readable acceptance tests using the language of your stakeholders and build up a living documentation of your system.

Last year feedback

Testimonials

Vladimir Georgiev

Senior Front-End Developer
"This course provides fundamental knowledge on how to set up and implement a project from start to end using best practice advice and much needed explanation on all the necessary ingredients for a functioning project. Angel is really knowledgeable and seems to have been through most of what Angular offers and wants to share it. I am genuinely impressed with how much useful content he has actually managed to include in this short course."

Venelin Venelinov

Software Development Lead - LAMP
"The course is а profound insight into the Angular world. Along with this, there are extra topics and examples related to frontend programming as debugging tools, ECMAScript 6, Typescript, which is very helpful in developing the Angular SPA app. The course is very practical as the theoretical part, which covers the very basic structure of the angular itself, is then practised with specific examples.
Angel is a very good front-end professional with the best knowledge in Angular I have met. He has been practicing it since Angular 1 and knows all the changes from the beginning. Angel has perfect presentations skills which make the course even more interesting and engaging."

Zharko Petrovski

Senior .NET Developer
"Really impressive course, with a broad range of interesting Angular-specific and general front-end topics, very well structured and balanced. One of the best courses I've attended.

Thanks to Angel, who is a great professional. He is eager to share his extraordinary skills. He goes above and beyond to cover any aspect of the topics involved. Significantly focused on the practical than the theoretical journey.

I'm looking forward to the next course cooked by Angel."

Know more, trust more

About Us

DevTalks is the new community for sharing knowledge, experience and inspiration for the people in the software development industry. We strongly believe that this is the way to become better at what you are doing and therefore, to make the whole community better.

We decided to create a variety of events for developers by developers to share our knowledge within the IT community, where we can discuss the best modern practices, tools and ways to write high-quality code.

We try to inspire the change for good with sharing high-quality information, practical examples and experience, to help software engineers provide the best solutions for any problem. Our lecturers are industry’s leading experts, known for using innovative approaches in their work.

Take part of our events if you want to catch up with the newest software trends, connect with industry experts, share your passion and grow your skills.