Peter 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.
Peter 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.AngularNYC ❤️Angular Minsk - pre-rendering, Scully, NGXSAngularNYC2020-07-01 | Angular Minsk @ Angular New York
We 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 NGXSChristmas Angular NYC Gerard SansAngularNYC2019-12-20 | ...Ilya Birman - Feedback FirstAngularNYC2019-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 FirstWeb Design is design in the Web - Peter B. Smith and James GibsonAngularNYC2019-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 EliassyAngularNYC2019-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 KolodnyAngularNYC2019-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 ZenAngularNYC2019-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 KaufmanAngularNYC2019-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 MeyerAngularNYC2019-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 CostelloAngularNYC2019-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 SamuelsAngularNYC2019-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 BuddhaAngularNYC2019-08-09 | This talk is all about how can we do lazy loading in angular 8 with `import()` syntax.Angular NYC June 2019AngularNYC2019-06-19 | ...Michael Solati 🎤 Angular ElementsAngularNYC2019-05-28 | nge-slides.firebaseapp.com
You 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 NavigationAngularNYC2019-05-24 | Slides: https://zndg.tl/2X0GKVx Project on firebase at: github-clone.firebaseapp.com github 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 projectTypeScript Puzzlers 🎤 Yakov FainAngularNYC2019-04-18 | Slides: https://zndg.tl/2vkr1Vb As 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 KaufmanAngularNYC2019-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 SmithAngularNYC2019-03-25 | Building using Angular Schematics - Peter B. Smith Slides: https://zndg.tl/2CtG9U5 Video 1: youtu.be/2uN_KAbVDDk Video 2: youtu.be/3S1gTiP0Ehw Video 3: youtu.be/XEgVsZqNt84 Video 4: youtu.be/9BjvnCfb-L8 Video 5: youtu.be/3J-tRSWiN34
Peter 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 SmithAngularNYC2019-03-25 | Building using Angular Schematics - Peter B. Smith Slides: https://zndg.tl/2CtG9U5 Video 1: youtu.be/2uN_KAbVDDk Video 2: youtu.be/3S1gTiP0Ehw Video 3: youtu.be/XEgVsZqNt84 Video 4: youtu.be/9BjvnCfb-L8 Video 5: youtu.be/3J-tRSWiN34
Peter 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 SmithAngularNYC2019-03-25 | Building using Angular Schematics - Peter B. Smith Slides: https://zndg.tl/2CtG9U5 Video 1: youtu.be/2uN_KAbVDDk Video 2: youtu.be/3S1gTiP0Ehw Video 3: youtu.be/XEgVsZqNt84 Video 4: youtu.be/9BjvnCfb-L8 Video 5: youtu.be/3J-tRSWiN34
Peter 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 SmithAngularNYC2019-03-25 | Building using Angular Schematics - Peter B. Smith Slides: https://zndg.tl/2CtG9U5 Video 1: youtu.be/2uN_KAbVDDk Video 2: youtu.be/3S1gTiP0Ehw Video 3: youtu.be/XEgVsZqNt84 Video 4: youtu.be/9BjvnCfb-L8 Video 5: youtu.be/3J-tRSWiN34
Peter 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-VincentAngularNYC2019-03-19 | Developer Experience: devs have feelings too - Eudes Petonnet-Vincent Slides: https://zndg.tl/2UGH36C
DX (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 Smith Video now available at: youtu.be/2uN_KAbVDDk Slides: https://zndg.tl/2CtG9U5Progressive Web Apps: Future of web development by Maciej TrederAngularNYC2019-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.Alex Eagle - ABC: Angular, Bazel and CLIAngularNYC2019-01-25 | ...Lets build our own Observable from nothing to a simple Observable | By Neal LubinAngularNYC2019-01-24 | Walk through building our own simple implementation of Javascript Observables using nothing but the RxJS docs as a reference. Github: github.com/maniator Twitter: twitter.com/maniatorBuild real-world form systems with Angular | By Nir KaufmanAngularNYC2019-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 CostelloAngularNYC2019-01-24 | Using GraphQL with Angular | By: Lee Costello
GraphQL 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 MinarAngularNYC2019-01-23 | meetup.com/AngularNYC/events/258109190 Igor Minar & Alex Eagle on Panel discussing IVY in upcoming version of AngularSoftware Panel - Sebastian Witalec & Jason JeanAngularNYC2018-12-26 | ...Sharing Code Between Web and Mobile apps - Sebastian WitalecAngularNYC2018-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 JeanAngularNYC2018-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.Creating an observable from scratch (live-coding session) - Ben LeshAngularNYC2018-12-07 | This talk is an attempt to demystify what an Observable is, what pipe is, and what operators are.
RxJS Animation Video youtu.be/X_RnO7KSR-4AngularNYC - Angular CDK portals - Nir Kaufman (@nirkaufman)AngularNYC2018-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 @EudesPVAngularNYC2018-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.
Slides
scribd.com/document/386383267/Angular-ProvidersAngularNYC - Angular 6 @ RubiconMD - Christina Li, Burke Livingston and Dave MillerAngularNYC2018-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 AhmedAngularNYC2018-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 BurkeAngularNYC2018-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.
Personal blog davidmburke.comAngularNYC - Integration testing with Cypress - Gleb Bahmutov (@bahmutov)AngularNYC2018-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?
Slides slides.com/bahmutov/cypress-at-angularnycAngularNYC - Angular 6 vs AngularDart - David Christian LiedleAngularNYC2018-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 AhmedAngularNYC2018-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.
CONTENTS 0:42 - List of new available items in v6 1:08 - New CLI commands made available in v6 3:02 - New CLI commands for Angular Material 4:05 - New CLI command to create libraries 5:25 - Custom Elements 5:58 - Breaking Changes in v6 7:38 - What I learned when upgrading my project from v5 to v6 10:16 - Angular upgrading support tool (update.angular.io) 11:18 - The EndAngularNYC - A Massively Multiplayer Board Game built with Angular - Michael UrbanAngularNYC2018-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.
RESOURCES
Slides s3.amazonaws.com/codewordsio/Codewords.io+(Angular+NYC+June%2C+2018).pdfAngularNYC - Angular Unit Testing Best Practices - Joe Eames (@josepheames)AngularNYC2018-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.
RESOURCES
Source code github.com/joeeames/ngDocIO/tree/testingAngularNYC - NgRx Complex Forms - Jesse Sanders (@JesseS_BrieBug)AngularNYC2018-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.
GitHub github.com/briebug/ngrx-complex-formsAngularNYC - Be conscientious: Recycle your Angular code across the web and mobile - Alex ZiskindAngularNYC2018-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)AngularNYC2018-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.
Code samples github.com/Farata/angulartypescript/tree/master/code-samplesAngularNYC - Angular Universal 6 - Peter B. SmithAngularNYC2018-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/angularAngularNYC - Angular modules - Patterns & Techniques - Nir Kaufman (@nirkaufman)AngularNYC2018-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.
CONTENTS
0:07 - Intro 0:26 - About Nir 0:46 - A few announces
MODULE DEFINED 2:10 - An Angular application is a collection of modules 2:54 - Angular Modules 3:06 - Angular Building blocks 4:16 - Root (App) Module 4:52 - Routing Module 5:15 - Core Module 5:55 - Feature Module 6:48 - Shared Module 7:19 - Application Structure 7:38 - Question: Does folder structure depend on app structure?
MODULE TYPES 7:37 - Module Categories
SOLID Module 8:07 - SOLID overview 8:50 - Single responsibility 9:15 - Open / closed
DEMO 9:34 - Demo 15:38 - Refactoring and extention of module 18:35 - Overwriting service providers 19:37 - Multi provider 20:33 - Injection Token 23:04 - Extension of services 25:27 - Question: customize injection mechanism 27:47 - Angular Router under the hood 31:03 - Summary
THE REAL WORLD 31:40 - Design. Build. Document. 32:00 - Draw.io 32:58 - Multi app setup 34:00 - Mono repo 34:28 - The mono repo pros 35:02 - Nrwl Extensions
RESOURCES
12 telegram chat
https://t.me/joinchat/AAAAAEs6Ej1ZvBGBkzXX8wAngularNYC - Creating Video Hub App with Angular and Electron - Boris Yakubchik (@whyboris)AngularNYC2018-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