Skip to content

Front-end world from an “Angular” perspective

Front-end world from an “Angular” perspective

WATCH THE VIDEO
KNOWLEDGE

What Will You Get

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
EXPERTISE

Meet the Speaker

Front-End Developer Lead

Angel Nikolov

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.

at a glance

Agenda

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

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.”

Learn. Share. Inspire. Talk.

About Us

MentorMate DevTalks is a community for sharing knowledge, experience, and inspiration with 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 by 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 in our events if you want to catch up with the newest software trends, connect with industry experts, share your passion, and grow your skills.

Past events
Load More