Creating an observable from scratch (live-coding session) - Ben Lesh AngularNYC 2018-12-07 | This talk is an attempt to demystify what an Observable is, what pipe is, and what operators are.Here is the Stackblitz: stackblitz.com/edit/typescript-im9hxp(Don't use this for real, people... haha... just for playing) :)
AngularNYC ❤️Angular Minsk - pre-rendering, Scully, NGXS AngularNYC 2020-07-01 | Angular Minsk @ Angular New YorkWe invited our friends from AngularMinsk, Belarus to speak at Angular NYC :)Talks: ⚡️ Konstantin Malikov - Prerender it easily⚡️ Ilya Ryabchinski - Scully - A New Way To Angular📢 Aliaksei Kuncevič - Progressive State Management with NGXS
Ilya Birman - Feedback First AngularNYC 2019-11-11 | ⚠️Note: This talk isn’t directly related to Angular, but would be useful for UI developer of any kind⚠️From Ilya: This lecture is for both user interface designers and developers. I have done some talks on this topic, but poor understanding of the importance of feedback in interfaces remains one of the main problems with them. This lecture includes things like levels of feedback quality (immediate, continuous, physical); progress indication, skeletons, and optimistic feedback; perceived performance. Also: how to fix the iPhone X’s side button that takes a little bit of time to put your phone to sleep and make it behave like the old iPhones sleep/wake button that put it to sleep instantly.In this special (together with ReactNYC meetup.com/ReactNYC) event we would love to give stage to Ilya Birman (ilyabirman.net) who’s visiting NYC all the way from Russia.Ilya is a product and information designer. He is the author of the book User Interface: https://bureau.rocks/projects/book-ui-en/His most notable other projects are Typography Keyboard Layout for Mac and Windows, Aegea blogging engine, and Moscow & some other cities transit maps.🕒 6:45 - Ilya Birman🎤 Feedback First
Web Design is design in the Web - Peter B. Smith and James Gibson AngularNYC 2019-11-06 | Today there's an open question that designers and developers face: 'should designers code?'Web design is design in the web. So designers benefit from understanding the material they are working with. Examples of material, and constraints, of the web include: latency, different device sizes, inputs from voice to keyboards, camera access, and sensors. A designer uses the tools native to the medium. When designing for web that includes HTML, CSS, and rudimentary JavaScript. Modern frameworks and libraries like Angular, React, and Vue lend themselves to modularity, which enables designers to collaborate effectively with developers. Every UI bit is encapsulated and reusable, and these are core patterns seen in design outside of the web.The result of working directly with the web is design at a speed that is faster than starting with high-fidelity static mock-ups, getting on a real browser, on a real phone earlier, and reducing the expensive back and forth with developers.JavaScript for designers matters. Basic DOM manipulation, toggling classes, how to target elements, simple loops and if statements, handling a JSON file imitating real data, that's a designer needs. Developers handle state management and API interactions.We will cover how a Design Technologist and a Front-End Engineer work together to rapidly deliver working prototypes and fully production-ready code using examples in Angular.
Standalone components in the world of Angular Ivy - Eliran Eliassy AngularNYC 2019-11-06 | Zones? Injectors? Modules? Haven’t you always wanted to create just 1 simple component without being worried about those massive buzzwords? Now you can finally get it!Angular is changing, and with the upcoming release of Ivy, it becomes much leaner and dynamic than before. In this talk, I will demonstrate why Angular Ivy is truly a game-changer. We will understand how we can leverage the Ivy renderer to create independent components, without zones, and without the need of modules. We will learn how to import non-routable components dynamically and even to create higher-order components decorators!
Experimenting with Functions-first RxJS - Moshe Kolodny AngularNYC 2019-09-23 | For too long functions in RxJS would come second, after all async params were resolved, but no longer! In this talk will explore how by applying some more advanced functional programming techniques we can start with functions and apply the parameters later in a functional way. This would allow for easier ergonomics when mixing and matching Observables with plain values.
Ionic Version 4 - Daniel Zen AngularNYC 2019-09-23 | The latest version of Ionic makes it easier than ever to use the latest version of Angular to produce high quality cross-platform mobile applications. Now it uses Web Components under the hood. This makes it easier to use competing frameworks (such as React, Vue, or VanillaJS). Watch a walk through as we create an application in Angular using the ionic-cli. Install the IonicDev app on your own phone and watch how changes are instantly visible during development on your own phone. We will finish by discussing the requirements for compiling for Android and iOS for eventual deployment to the Google Play Store and the iOS App Store.
Create Your First Angular Library - Nir Kaufman AngularNYC 2019-09-12 | This talk will guide you through the process of creating an Angular library from scratch using the Angular CLI. You will learn how to set up a project correctly, how to configure your library, and how to generate a sample project to test it.
Building Angular Apps with Internationalization (I18N) in Mind - Naomi Meyer AngularNYC 2019-09-12 | At Adobe we build products for the world, this talk with provide a high level overview of internationalization (i18n), globalization (g11n), and localization (l11n) learnings. Why these are important and how to implement in design, UX, and within the codebase - using Angular code examples and 3rd party library recommendations.
TypeScript Decorators & Metaprogramming - Lee Costello AngularNYC 2019-08-09 | Typescript decorators are one of the first things you encounter when writing an angular application. Many of us interact with them daily and may not realize what they are actually doing under the hood. We’ll look at how we already use decorators in typescript, what they are doing for us, how to leverage even more power from them, and what’s so meta about any part of this.
Angular Route Guards - Chris Samuels AngularNYC 2019-08-09 | This talk will help you understand the basics of defending your apps from unauthorized access. This is my second talk and I hope to be able to share a small demo where you will understand how you can use angular to allow access to specific views using Route Guards.
Angular Lazy Loading - Dimpu Aravind Buddha AngularNYC 2019-08-09 | This talk is all about how can we do lazy loading in angular 8 with `import()` syntax.
Michael Solati 🎤 Angular Elements AngularNYC 2019-05-28 | nge-slides.firebaseapp.comYou write React for work, but you don't want to no mo'. You ask your boss, please? But (s)he still says, no! How about instead of missing class, you try something different? Well, the Angular team has something cool for you... Angular Elements! Angular Elements are Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way. Learn how to write and package your Angular components to be used across any framework (or no framework) by extending HTML to allow you to define a tag whose content is created and controlled by your Angular code. Now you can put your Angular components into any other frameworks components! (You gotta fight for your right to write Angular!)
Chris Samuel 🎤 Angular Routing and Navigation AngularNYC 2019-05-24 | Slides: https://zndg.tl/2X0GKVxProject on firebase at: github-clone.firebaseapp.comgithub repo: github.com/chrisksamueljr/cloning-github-User-interfaces- Configuring a Route- Adding a router-outlet to your Application- Using RouterLink- Adding Route Authentication Controls with route guards- Implementing nested views with route parameters and child routes- Problems that I had to overcome with this project
TypeScript Puzzlers 🎤 Yakov Fain AngularNYC 2019-04-18 | Slides: https://zndg.tl/2vkr1VbAs an Angular developer, you are coding in TypeScript day in and day out. But can you say that you know the syntax of this language? In this presentation, you'll be looking at small code fragments and will either try to explain them or guess if they will even compile. Since this is not a technical interview, you'll get the answers too! The person who'll provide the best answers will get a signed copy of the second edition of Yakov's book "Angular Development with TypeScript"
Fullstack Angular w/ NestJS 🎤 Nir Kaufman AngularNYC 2019-04-18 | Take your existing Angular skills to the server-side and learn how to build full-stack applications while leveraging everything you already know.During this session, we will build an app from scratch, all the way from the database, to the client using modern tools.
Angular Schematics (5 of 5): @schematics/angular - Peter B Smith AngularNYC 2019-03-25 | Building using Angular Schematics - Peter B. SmithSlides: https://zndg.tl/2CtG9U5Video 1: youtu.be/2uN_KAbVDDkVideo 2: youtu.be/3S1gTiP0EhwVideo 3: youtu.be/XEgVsZqNt84Video 4: youtu.be/9BjvnCfb-L8Video 5: youtu.be/3J-tRSWiN34Peter B. Smith is a Partner & Software Engineer at Upstate Interactive which builds Angular applications for everyone from local coffee shops to the US Department of Defense. There are common links between them. They are using angular/schematics to reduce the copy/pasting and re-writing of code from one app to the other.
Angular Schematics (4 of 5): Discovering @upstate/schematics - Peter B Smith AngularNYC 2019-03-25 | Building using Angular Schematics - Peter B. SmithSlides: https://zndg.tl/2CtG9U5Video 1: youtu.be/2uN_KAbVDDkVideo 2: youtu.be/3S1gTiP0EhwVideo 3: youtu.be/XEgVsZqNt84Video 4: youtu.be/9BjvnCfb-L8Video 5: youtu.be/3J-tRSWiN34Peter B. Smith is a Partner & Software Engineer at Upstate Interactive which builds Angular applications for everyone from local coffee shops to the US Department of Defense. There are common links between them. They are using angular/schematics to reduce the copy/pasting and re-writing of code from one app to the other.
Angular Schematics (3 of 5): Something Real - Peter B Smith AngularNYC 2019-03-25 | Building using Angular Schematics - Peter B. SmithSlides: https://zndg.tl/2CtG9U5Video 1: youtu.be/2uN_KAbVDDkVideo 2: youtu.be/3S1gTiP0EhwVideo 3: youtu.be/XEgVsZqNt84Video 4: youtu.be/9BjvnCfb-L8Video 5: youtu.be/3J-tRSWiN34Peter B. Smith is a Partner & Software Engineer at Upstate Interactive which builds Angular applications for everyone from local coffee shops to the US Department of Defense. There are common links between them. They are using angular/schematics to reduce the copy/pasting and re-writing of code from one app to the other.
Angular Schematics (2 of 5): Nothing from Something - Peter B Smith AngularNYC 2019-03-25 | Building using Angular Schematics - Peter B. SmithSlides: https://zndg.tl/2CtG9U5Video 1: youtu.be/2uN_KAbVDDkVideo 2: youtu.be/3S1gTiP0EhwVideo 3: youtu.be/XEgVsZqNt84Video 4: youtu.be/9BjvnCfb-L8Video 5: youtu.be/3J-tRSWiN34Peter B. Smith is a Partner & Software Engineer at Upstate Interactive which builds Angular applications for everyone from local coffee shops to the US Department of Defense. There are common links between them. They are using angular/schematics to reduce the copy/pasting and re-writing of code from one app to the other.
Angular Schematics (1 of 5): Schematics, not Angular - Peter B Smith AngularNYC 2019-03-25 | Building using Angular Schematics - Peter B. SmithSlides: https://zndg.tl/2CtG9U5Video 1: youtu.be/2uN_KAbVDDkVideo 2: youtu.be/3S1gTiP0EhwVideo 3: youtu.be/XEgVsZqNt84Video 4: youtu.be/9BjvnCfb-L8Video 5: youtu.be/3J-tRSWiN34Peter B. Smith is a Partner & Software Engineer at Upstate Interactive which builds Angular applications for everyone from local coffee shops to the US Department of Defense. There are common links between them. They are using angular/schematics to reduce the copy/pasting and re-writing of code from one app to the other.
March Meetup - Eudes Petonnet-Vincent AngularNYC 2019-03-19 | Developer Experience: devs have feelings too - Eudes Petonnet-VincentSlides: https://zndg.tl/2UGH36CDX (short for Developer eXperience), is the little sibling of UX (User eXperience). You want the end user to have a good time or be efficient when using your application, sure. You should also strive to ensure that developers using your components can do so without the urge to bash their laptop in after 2 hours of failed integration.We will build together a small carousel component and design its API step-by-step so that it can be integrated easily, whether you just finished the Tour of Heroes or are at the top of your Angular game.---Building using Angular Schematics - Peter SmithVideo now available at: youtu.be/2uN_KAbVDDkSlides: https://zndg.tl/2CtG9U5
Progressive Web Apps: Future of web development by Maciej Treder AngularNYC 2019-03-07 | Welcome to the web applications of the 21st century! Give your users a native-like app experience: instant load, offline experience and push notifications. During this talk, you will get a high-level overview of Progressive Web Application concept, how to get started with it in Angular CLI, potential pitfalls and how to address them.
Lets build our own Observable from nothing to a simple Observable | By Neal Lubin AngularNYC 2019-01-24 | Walk through building our own simple implementation of Javascript Observables using nothing but the RxJS docs as a reference.Github: github.com/maniatorTwitter: twitter.com/maniator
Build real-world form systems with Angular | By Nir Kaufman AngularNYC 2019-01-24 | Forms are a crucial part of any management system that requires a lot of user data input such as banks, insurance companies, CMS, health systems, booking applications and much more.Angular provides a dedicated module with rich API to handle form development.
Using GraphQL with Angular | By: Lee Costello AngularNYC 2019-01-24 | Using GraphQL with Angular | By: Lee CostelloGraphQL provides a powerful new way to approach creating an API and handling your data. Luckily, it works great with Angular and there are already plenty of tools and resources to get started with using GraphQL in an Angular application. We will discuss the basics of what GraphQL is, and how to integrate it with Angular.Github: Betterin30days (github.com/betterin30days)
Angular Jan 🔥 Meetup LIVE Panel with Igor Minar AngularNYC 2019-01-23 | meetup.com/AngularNYC/events/258109190 Igor Minar & Alex Eagle on Panel discussing IVY in upcoming version of Angular
Sharing Code Between Web and Mobile apps - Sebastian Witalec AngularNYC 2018-12-19 | Building separate web and native mobile apps, requires a lot of effort and is very expensive. This often forces us to pick just one and as a result sacrifice overall user experience. But you don’t need choose, you could do both with a single code sharing project. All it took, was a few sleepless nights and a few months of collaboration with the Angular team. I hear you ask: “How?” Simple: Structure your project with the power of Angular CLI and “Custom Schematics”. Then use Angular and NativeScript to build for web and native mobile. Do you want to transform your existing web project to a code sharing structure? We’ve got you covered with ng add and a collection of migration schematics. Join me and AngularNYC team to learn how the code sharing projects work, what can be shared, and how to transform existing projects. And all of that with just a couple of new CLI commands.
Building Large Angular Apps Successfully with Nx - Jason Jean AngularNYC 2018-12-19 | Successful organizations build ambitious products. Developing those applications takes a lot of code and a lot of work. See how Nx (Nrwl Extensions) supports enterprises in building complex applications and becoming more successful.
Complex Features Made Easy With RxJS - Ben Lesh AngularNYC 2018-12-07 | Demo repo:github.com/benlesh/add-features-with-rxjsRxJS Basics Videoyoutu.be/KOOT7BArVHQRxJS Animation Videoyoutu.be/X_RnO7KSR-4
AngularNYC - Angular CDK portals - Nir Kaufman (@nirkaufman) AngularNYC 2018-09-03 | Let’s talk about Portals in Angular. We will start by understanding the challenges of dynamic rendering in Angular and inspect various techniques to achieve this. Then we will dive into CDK Portals and learn why, when and how to use it in your app.
AngularNYC - Sharing is caring: a menagerie of Angular providers - Eudes Petonnet-Vincent @EudesPV AngularNYC 2018-08-27 | Dependency injection is one of Angular's most useful patterns. It allows to share data and communicate between components even in its simplest form. We'll go over the numerous ways to declare providers for dependency injection in Angular, one by one, to understand what use case they can solve.Slidesscribd.com/document/386383267/Angular-Providers
AngularNYC - Angular 6 @ RubiconMD - Christina Li, Burke Livingston and Dave Miller AngularNYC 2018-08-21 | How Angular helps your team getting quality results in a fast paced environment without compromising on quality.
AngularNYC - PWA with Angular (using service worker) - Nehal Ahmed AngularNYC 2018-08-01 | Angular provides a very neat feature of service worker to make our web applications progressive (PWA). In this talk, we will go over how to setup service worker for an application and touch on some of the benefits of doing so.
AngularNYC - Practical Forms with Ngrx-forms - David Burke AngularNYC 2018-07-23 | Forms start out simple and then get complex. We get decision fatigue between template driven, reactive forms, and how to manage their state. ngrx-forms is a library that helped me reduce boilerplate, cater to complex UX in form interaction, and provide consistency between forms and across web and native app platforms.RESOURCESngrx-formsgithub.com/MrWolfZ/ngrx-formsPassword managerhttp://passit.ioSource codegitlab.com/passit/passit-frontendPersonal blogdavidmburke.com
AngularNYC - Integration testing with Cypress - Gleb Bahmutov (@bahmutov) AngularNYC 2018-07-18 | Testing is hard. End to end testing is really hard. But maybe it is hard because our tools are not up to task. What if we could redesign the testing experience from the ground up to be fast, useful and effective?Slidesslides.com/bahmutov/cypress-at-angularnyc
AngularNYC - Angular 6 vs AngularDart - David Christian Liedle AngularNYC 2018-07-10 | Learn about the Dart programming language implementation of Angular and its clean, simple syntax in this contrast and compare session.
AngularNYC - Angular 6 - Whats New - Nehal Ahmed AngularNYC 2018-07-05 | Angular released v6.0.0 on May 3. It’s a good time to a take quick look at new features in v6. We’ll also try out some of the new CLI commands, and have brief review on what they do.CONTENTS0:42 - List of new available items in v61:08 - New CLI commands made available in v63:02 - New CLI commands for Angular Material 4:05 - New CLI command to create libraries5:25 - Custom Elements5:58 - Breaking Changes in v67:38 - What I learned when upgrading my project from v5 to v610:16 - Angular upgrading support tool (update.angular.io)11:18 - The End
AngularNYC - A Massively Multiplayer Board Game built with Angular - Michael Urban AngularNYC 2018-06-29 | Hear a bit about how it was built using Angular+WebSockets and stick around for a quick demo game. We'll find out if Mike provisioned a large enough VM, together. Dress is business formal.RESOURCESSlidess3.amazonaws.com/codewordsio/Codewords.io+(Angular+NYC+June%2C+2018).pdf
AngularNYC - Angular Unit Testing Best Practices - Joe Eames (@josepheames) AngularNYC 2018-06-14 | It's not good enough to just unit test. You need to be writing the best unit tests you can. In this session we won't look at how to write unit tests in Angular, we'll be looking at how to write GOOD unit tests in Angular.RESOURCESSource codegithub.com/joeeames/ngDocIO/tree/testing
AngularNYC - NgRx Complex Forms - Jesse Sanders (@JesseS_BrieBug) AngularNYC 2018-06-14 | NgRx is changing how we are writing our enterprise applications and helping us to reduce the complexity in our applications. We will be deep diving into complex forms that render forms dynamically. We will be covering the gambit of issues presented when working with forms including dynamic rules on when to show fields, validating field data, and updating the store. We will deep dive into code samples to walk you through step by step. We will also be covering other common pitfalls in NgRx applications with clear patterns on how to approach each problem.RESOURCESSlideshttp://briebug.github.io/presentations/ng-meetup/2018/03/ngrx-complex-forms/#GitHubgithub.com/briebug/ngrx-complex-forms
AngularNYC - Be conscientious: Recycle your Angular code across the web and mobile - Alex Ziskind AngularNYC 2018-06-08 | “The Web is for audience reach and native apps are for rich experiences. Both are strategic. Both are valuable. So when it comes to mobile, it's not Web vs. Native. It's both.” - Luke Wroblewski Now there is a way to develop for both web and native mobile apps with a shared code-base, and now is the time to harness that power.
AngularNYC - Working with WebSockets in Angular apps - Yakov Fain (@yfain) AngularNYC 2018-06-07 | In this session, you'll learn how to write Angular applications that communicate with the server using the WebSocket protocol, which is an efficient and a low-overhead way or communication between the browsers and servers. One of the most valuable features of WebSocket communications is that the server can initiate the data push to the client without waiting for the client's request for data. After getting a brief overview of the benefits of WebSockets over HTTP, we'll review a sample Angular/Node.js app that uses WebSockets.RESOURCES"Angular Development with TypeScript", Second Editionmanning.com/books/angular-development-with-typescript-second-editionBlogyfain.comCode samplesgithub.com/Farata/angulartypescript/tree/master/code-samples
AngularNYC - Angular Universal 6 - Peter B. Smith AngularNYC 2018-05-31 | Everyone knows that the state of Angular CLI and the standards around getting a new application started are changing faster than you change your socks. If you want to keep up with the latest and not only that but keep your sanity as well, then you need to learn from the community. Did you know that Angular CLI version 6 changes the way you generate a universal application? Learn that and more in this video. This talk covers three topics: - Starting with Sever Side Rendering using @angular/cli to generate an Angular Universal Application - Preventing excessive API calls in Server Side Rendered applications by using the TransferState API- Answering "who is this for?" when considering whether server side rendering is necessary for your application RESOURCES Slides http://www.upstate.agency/angular
AngularNYC - Angular modules - Patterns & Techniques - Nir Kaufman (@nirkaufman) AngularNYC 2018-03-08 | An Angular application is a collection of modules. Through this session, we will explore Angular modules API, learn about modules categories, and build an extendable reusable Angular module with some help from dependency injection.CONTENTS0:07 - Intro0:26 - About Nir0:46 - A few announcesMODULE DEFINED2:10 - An Angular application is a collection of modules2:54 - Angular Modules 3:06 - Angular Building blocks4:16 - Root (App) Module4:52 - Routing Module5:15 - Core Module5:55 - Feature Module6:48 - Shared Module7:19 - Application Structure7:38 - Question: Does folder structure depend on app structure?MODULE TYPES7:37 - Module CategoriesSOLID Module8:07 - SOLID overview8:50 - Single responsibility9:15 - Open / closedDEMO9:34 - Demo15:38 - Refactoring and extention of module18:35 - Overwriting service providers19:37 - Multi provider20:33 - Injection Token23:04 - Extension of services25:27 - Question: customize injection mechanism27:47 - Angular Router under the hood31:03 - SummaryTHE REAL WORLD31:40 - Design. Build. Document.32:00 - Draw.io32:58 - Multi app setup34:00 - Mono repo34:28 - The mono repo pros35:02 - Nrwl ExtensionsRESOURCES12 telegram chathttps://t.me/joinchat/AAAAAEs6Ej1ZvBGBkzXX8w
AngularNYC - Creating Video Hub App with Angular and Electron - Boris Yakubchik (@whyboris) AngularNYC 2018-03-02 | With Electron you can write your code once and nearly effortlessly build three, identically-performing, native apps: Mac, Windows, and Linux. Learn what Electron is capable of, see how the Video Hub App (http://videohubapp.com) was built, and avoid some pitfalls of interacting with and building for the OS. We'll explore the power of Angular pipes: chaining and reusing them to offer users advanced search functionality. And we'll find out how just a few lines of reusable Angular animations code will make your app feel smooth. CONTENTS 0:06 - Intro 0:22 - Agenda 0:39 - You can do it! 1:40 - Demo 3:03 - Electron 3:49 - angular-electron 6:03 - electron-builder 7:19 - Dev console 7:49 - Miscellaneous notes 9:41 - Angular Pipes 11:32 - Anatomy of a pipe 12:21 - How pure are your pipes? 15:28 - Angular Animations 15:35 - Appear and Disappear animation 17:42 - Animations demo 18:24 - Online demo 19:04 - Credits RESOURCES Online demo http://dev.yboris.com/vh Slidesslideshare.net/yboris/creating-video-hub-app-with-angular-electron-88441515 angular-electron github.com/maximegris/angular-electron electron-builder github.com/electron-userland/electron-builder node-fluent-ffmpeg github.com/fluent-ffmpeg/node-fluent-ffmpeg node-ffmpeg-installer github.com/kribblo/node-ffmpeg-installer node-ffprobe-installer github.com/SavageCore/node-ffprobe-installer angualar2-virtual-scroll github.com/rintoj/angular2-virtual-scroll
