Angular Summit 2017

These are notes from all of the sessions I went to.

Sessions

Wednesday

1. Keynote - Michael Carducci (@michaelcarducci | /carducci)
   The State of Angular in 2017
   The entire landscape of AngularJS has been changing rapidly. What does it all mean?

   It seems as though Angular2 was just released, and Angular 4 is already being finalized. Angular uses semver, which means 4 contains breaking changes again. What does this mean for our Angular2 (and Angular1) projects, and what happened to Angular3? Find out in this keynote - The State of Angular in 2017

2. Angular Flex Layout - Ekaterina Orlova (@cheerypick | /cheerypick)
   The power of Flexbox and RWD the Angular way
   Slides: local | online
   The Flexbox Layout is an indispensable tool for defining UI layouts and easy solving some common issues like vertical centering, same-height columns, reordering and changing direction. It supported by all the main browsers and platforms and works for the responsive web design perfectly. How to use the power of this CSS box model in Angular developer-friendly way using APIs?

   Meet Flex Layout from Angular Material team - the smartest way to automate the process of applying appropriate Flexbox CSS to browser view hierarchies. No more complexities and workarounds of traditional, CSS way, but the real power to easily and intuitively specify different layouts, sizing, visibilities for different viewport sizes and display devices.

   Let’s discover Angular Flex Layout advantages by real-life examples and check how easy to add the responsiveness to any SPA using the Responsive API features.

3. Angular Mobile Toolkit - Christina Kayastha (@christikaes | /christinakayastha)
   Progressive Web Apps
   Slides: local
   One of the things that makes Angular so powerful is all of the tooling that it comes with. One piece of tooling is the Angular Mobile Toolkit and how it helps you easily setup Progressive Web Apps. PWAs will help you create an offline first experience, so that even users with little or no connectivity can experience your web app.

   In this talk we will talk about the basics of what makes a PWA, and go through the steps of implementing a service worker. We will tie it all together with the Angular Mobile Toolkit.

4. Dynamic Directives - Peter Pavlovich (@ppavlovich | /pavlovich)
   Part 2: Taking directives to the next level
   Directives are, arguably, one of the most attractive features of Angular. But much of their power goes unused by most developers. Dynamic templates, scope isolation, and powerful, flexible compilation are all tools the savvy Angular developer needs to master.

   In this session, we will build on your basic understanding of Angular directives and explore the more complex and powerful options available to directive authors. We will discover and explain the use of some of the more powerful but often overlooked or hidden features that make directives such an indispensable part of the Angular framework.

   From dynamically generated templates to isolating your scope to proper use of pre, post and linking functions, if you write directives, you will not want to miss this opportunity to master these capabilities.

5. Advanced State Management With Redux and ngrx - Gerard Sans (@gerardsans | /gsans)
   Angular 4+
   Slides: local
   Redux is an architecture made famous by Facebook and React. It is based on Flux and Elm so it provides a solid base to create complex applications.

   In this talk we are going to use a basic application to showcase Redux while using Angular and ngrx/store. Finally we will cover asynchronous scenarios with ngrx/effects.

Thursday

1. Angular Redux - Christina Kayastha (@christikaes | /christinakayastha)
   Slides: local
   Angular Redux is a great library that provides redux bindings for state management in Angular.

   State management is essential in large scale Single Page Applications-it helps keep code easy to learn and debug. In this talk we will introduce the concept of Redux and show how Redux can be used to managed state in Angular.

2. Implementing Inter-component Communication in Angular 4 - Yakov Fain (@yfain | /yfain)
   Slides: local
   Angular is a component-based framework with a well-defined API for passing data to and getting data from a component. Any application is a tree of components that often need to communicate with each other.

   In this presentation, you'll see how to create reusable application components that can exchange data with each other in a loosely-coupled manner. You'll see how components can communicate via a common parent or via an injectable service. You'll see how to pass data using the router, input and output parameters, events and callbacks. You'll also learn how to use projection to pass HTML fragments to a component's template. You'll see how to pass parameters to routes. We'll also touch upon the incorporation of the third-party JavaScript libraries into an Angular 4 app.

3. Communication with the server via HTTP and WebSocket protocols - Yakov Fain (@yfain | /yfain)
   Angular 4+
   Slides: local
   In this session, you'll see how to create an Angular 4 app that can communicate with the servers via a pull (HTTP) and push (WebSocket) modes. We'll program a simple Node server and then will go through a number of code samples that communicate with it using HTTP and WebSocket protocols.

   We'll start with creating a simple NodeJS server, and then will enable it to handle HTTP requests from an Angular app. Then you'll see how to wrap a service into an observable stream. Finally, we'll teach our server to perform a data push to an Angular client using the WebSocket protocol.

4. Angular on the Desktop with Electron - Troy Miles (@therockncoder | /rockncoder)
   “Electron” is the secret sauce used by startups and billion dollar companies to create cross-platform desktop apps. It lies at the heart of favorite apps like Atom, Slack, Visual Studio Code, Ionic Lab, and GitBook. Electron is an open source project from GitHub.

   In this session, we walk through developing an Angular with Electron. We'll use the command line tools to create our app. Walk through the development workflow of adding features and debugging our code. And then we will show our app running on Linux, MacOS, and Windows.

   Since Electron includes the rendering engine of Chromium, CSS animations, and high-speed graphics are a breeze. We demo both animations and D3.js running in our cross-platform app.

   We will wrap up with valuable tips on maintaining our app, updating it and finally submitting it to the Mac and Window App Stores.

5. Angular Material - Christina Kayastha (@christikaes | /christinakayastha)
   Slides: local
   One of the things that makes Angular so powerful is all of the tooling that it comes with. AngularMaterial is a UI Component Library that makes it easy to build a nice looking app very easily. In this talk we will explore how to setup and use AngularMaterial in your Angular apps.

   We will talk about some Material Design guiding principles, and see how AngularMaterial makes incorporating these easy! Get ready to skin your app with some awesome, clean, and stunning components!

Slides

All slides in this repository were included with permission of their respective authors. All slide authors retain the copyright for their slides.