Learn Angular, Express and Redwoodjs

As developers, we have a responsibility to protect the data our users trust us with. No one wants to wake up to the news that their site was hacked and all of the user accounts stolen.

Security is important, yet it is often overlooked and forgotten.

Part of the reason for this is that security seems hard to get right. This results in developers crossing their fingers and hoping for the best.

In this course, you'll learn how to protect your application by learning how to attack it.

Start your journey into web security today!

Check out these [**community notes for this course on Github**](https://github.com/wjohnson85/eggheadio-web-security-essentails).

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

express

Web Security Essentials: MITM, CSRF, and XSS

Angular is a robust, powerful framework for building applications at scale, but it can be really intimidating to beginners! This collection by [JavaScript teacher Sam Julien](http://www.samjulien.com/) is here to help you learn Angular in bite-sized chunks. 

*Note from Sam: these lessons are loosely related but are not meant to necessarily be followed in order from start to finish. I've provided embedded code and links to GitHub where applicable, though, so you can always have access to the finished code for the lesson.*

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Angular Basics

Express is a well-known and supported framework for Node web applications. It provides a lot of excellent functionality to process requests, interact with other APIs, handle authentication and return appropriate requests for any client.

This collection will look at providing an API for a specific application but will explore concepts that will be helpful in building a wide variety of applications.

Building an API with Express

Modern applications know how to keep users informed of realtime updates through notifications, popups, and other messages.

On the development side, the ability to not only create web apps but have them communicate in realtime is a quirky, standout skill for your resume. It’s interesting, useful, and powerful.

In this course, Mark Barton will show you how to use Socket.io to facilitate bi-directional client-server communication and notifications using Vue on the frontend. Socket.io is a JS library that connects a client-side library to a node.js server. In the course, you’ll see how to use Socket.io to broadcast simultaneously to all or targeted clients based on filters you set up — so the right people see the right message at the right time.

You’ll learn to set up and connect Socket.io with node.js and Vue, and you’ll get practice making informed, complex architectural decisions around realtime broadcast messaging.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue and Socket.io for Real-Time Communication

Learn how to build a simple REST API to store notes using the latest built-in node features including native ES modules, the fs/promises API, async/await, the nullish coalescing operator, and destructuring. No compilers, no build steps, pure code.

This collection of lessons is great for beginners to Express as long as they are familiar with JavaScript and the HTTP protocol. Those more familiar with node and express will appreciate a fast-paced, modern take on using these popular tools and will likely benefit most from the lessons on input validation, models (which emphasizes a lot of new syntax), using fs/promises to serialize a `Map`, and accessing asynchronous data with `async/await`.

Pre-requisites:

- [Install curl](https://curl.haxx.se/)
- [Install node 14](http://nodejs.org/)
- Be familiar with the terminal

View the source for this project in the [project's github repo](https://github.com/xjamundx/egghead-express).

**Notes**:

- I'm not very pedantic about REST and basically just mean an API over HTTP
- [Express 5](https://expressjs.com/en/guide/migrating-5.html) is still in alpha (and has been for over two years), but most of these lessons apply to Express 4 as long you use something like [express-async-errors](https://www.npmjs.com/package/express-async-errors) to add support for `async` routes and middleware

Build a REST API with Express 5 and node 14

This collection of lessons will give you some practical tips and tricks to create faster and more reliable Angular applications. They are highly inspired by the content published on [web.dev/angular](https://web.dev/angular) by [Minko Gechev](https://twitter.com/mgechev) and [Stephen Fluin](https://twitter.com/stephenfluin).

**What you'll learn here is how to..**

- improve an app's TTI via route-level code splitting and lazy loading
- implement a loading indicator for lazy loaded routes
- improve performance via preloading all lazy modules 
- implement a custom preloading strategy
- preload lazy loaded modules with the Angular CLI
- optimize Angular's Change Detection
- implement virtual scrolling for large lists with the Angular CDK
- add client-side precaching with Angular and service workers

That said, have fun 🚀

Build Performant and Progressive Angular Applications

Angular elements are one of the major innovations in Angular 6+. Elements allow us to develop Angular components like we always have through Angular’s powerful API, and then compile them into browser-native custom elements. With custom elements, we can define new HTML elements in a framework-agnostic way that adheres to web standards. We can also extend the HTML by defining a tag whose content is created and controlled by JavaScript code.

In this course, we’ll look at how to leverage Angular elements within our Angular apps to make them even more dynamic — a use case that’s commonly required in CMS-like environments. Going a step further, we’ll also see how we can compile our Angular elements into a standalone script file, which you can integrate into any other web context to pass data and register events on your custom elements.

Thanks for joining us!

Getting Started with Angular Elements

As your Angular application grows, it becomes more difficult to manage application state.

NgRx can help with that!

In this course, we will learn how to convert an Angular application from using stateful services into using NgRx.

We will accomplish this by adding a new feature, including building a reducer and actions. We'll also touch on using selectors to query our state, managing collections with NgRx entity, async operations, and hiding implementation details with the facade pattern.

Reactive State Management in Angular with ngrx

Angular is particularly popular at large enterprises. Most of the time those line of business apps are very data driven and forms heavy. While Angular gives us two different approaches to implementing forms, neither of them is very satisfying, nor do they help keep the maintainability high especially in large enterprise apps. 

In this course we're going to learn about [ngx-formly](https://formly.dev/), a library that helps cope with some of the mentioned issues. With Formly you define the form structure once in your component code and the HTML will be taken care of by the library. This helps to reduce maintainability and moreover Formly has some nice reactive features built-in that help you reduce your form code even more.

Questions? Ping me [on Twitter](https://twitter.com/juristr) or on [juri.dev](https://juri.dev) 🙂

Configuration based reactive Angular Forms with ngx-formly

Components are all about encapsulating decisions. The perfect component makes good decisions for you without making you think about it. Of course, no one knows what decisions you’re going to want. To make components reusable, we set reasonable defaults, then allow you to override them when you don’t like the decisions made for you.

This course covers three broad categories of decisions that can be encapsulated in a component: state, view, and logic. You’ll learn to move an Angular component from completely static to very configurable using a variety of techniques.

The course takes some of the most popular components in web development and applies them to Angular. You’ll learn to write components that are opinionated about their core purpose, but allow parent components to overwrite secondary concerns when pain points require a more complex pattern.

Advanced Angular Component Patterns

While this course is for IBM Domino Developers who are looking to utilize Node.js alongside their applications, or Javascript developers looking to integrate with a Domino server. There are quite a few tips and tricks you can learn for integrating Node.js as a proxy server for any REST API you might want to communicate with your JavaScript Application.

We cover how you can continue to use cookies provided by IBM Domino for user authentication and authorization while accessing a Node.js / Express based application, including modifying the standard login form to expose authentication errors.  

We show how to store user level information inside a JWT giving the option to store functional levels of access safely.  This stateless token can then be decoded server side to list what user roles a user has and therefore can restrict functionality without having to refer back to Domino each time.

The course will demonstrate Create, Read, Update and Delete methods using the Domino Data Services all via the NodeJS application but still maintaining Domino security.

And finally, we show how you can reuse Domino generated HTML inside a handlebars template by scraping and manipulating the HTML.

Integrate IBM Domino with Node.js

In this course we will create an Angular application that will serve as a public website. Normally there are quite a few trade-offs by using a Single Page Application for a public website. For instance, they are hard to index by search engines and if you link to them on social media you get a generic preview. Also, the initial rendering can take a while (especially on mobile devices) as the browser has to pull in all the JavaScript in order to render a working app.

By adding and configuring Angular Universal we add Server Side Rendering capabilities to our application. This helps prevent the issues mentioned above by pre-rendering the application on the server and serving this out to the user when she requests the app. Once the JavaScript has been loaded the app will seamlessly switch over to a ‘normal’ web application.

For good measures and to modernize our application we will add and configure a Service Worker that will allow for a native-like experience in the browser (splash screen, desktop icon, fast load, cached data, etc).

SEO Friendly Progressive Web Applications with Angular Universal

Services and registering service providers are an inherent part of an Angular application. It is where you should define your application logic, they keep the state of the application and allow to share that among different components. 

That said, components can ask for instances of services by specifying them as parameters of their constructor functions which will then provided at runtime by Angular’s dependency injection mechanism. While services themselves are mostly just plain ES2015 classes, there are some interesting things to discover, especially when it comes to dependency injection. 

We can define services at various levels within our application, which allows us to control the scope and visibility of a given service. We can furthermore alias old service definitions to new, existing services which is handy for refactoring scenarios and we also have the possibility to define so-called factory functions for fully taking control of how a given service is being constructed. 

In this course we will take a closer look and walk step by step through all of these scenarios.

Angular Service Injection with the Dependency Injector (DI)

JSON Web Token (JWT) is a low overhead option for authentication that is easy to implement and scales with your application. There is no need to store session data as everything you need is stored in an encoded string sent in the JWT, significantly reducing database overhead for your servers.

In this course, we will build a simple authentication server that will act as a token issuer, and we will use those tokens to access resources on an API.  Starting from scratch, you will learn how easy token based authentication can be and will understand how to use them on your APIs as well as on the front end of your web applications.

JSON Web Token (JWT) Authentication with Node.js and Auth0

In this course we will explore integral Angular Material components. We will start with components related to navigation, layout, and structure. We will then move through the utility, input, and datatable components, demonstrating how each can be used to suit your project’s needs. Finally we will touch on theming your application to create a custom look and feel that fits within the Material Design guidelines.

By the end of the course you will be comfortable leveraging the Angular Material library to create an outstanding interface and user experience!

Structure Angular Apps with Angular Material Components

Client-server communication is at the heart of any modern web application. In this course we will take a look at how to communicate with your backend API in Angular, specifically with the new Http module(`@angular/common/http`) introduced and used in Angular  `4.3.1` and later.

We will learn how to configure the `HttpClientModule`, how to fetch and send data, customize HTTP headers that are being sent and how to properly handle error responses.

We will also take a look at some more advanced use cases such as listening to progress events and intercepting HTTP calls. Finally we will also learn how to isolate and mock HTTP calls in automated unit tests.

Learn HTTP in Angular

When we build forms, we know there’s a good chance that the data we want to collect may change. Dynamic Forms in Angular give us the ability to define the underlying object model before binding the form to the template. This lets our forms programmatically adjust to the underlying model so we don’t have to update each form manually as our data will eventually change.

In this course Google Developer Expert-led we will use Angular’s Reactive Forms and learn about the basics for dynamically rendering `FormControls`. We will also explore how more advanced input controls such as select boxes and radio button lists can be dynamically bound to our template. 

If you’re coming from AngularJS (v1.x) you may also be familiar with dynamic forms in the context of `Formly`, a library for automating dynamic forms. We will also quickly touch on `ng-formly`, which is the Angular (2+) equivalent.

Create Dynamic Forms in Angular

Dynamic data gives us the opportunity to build dynamic components. Dynamic components are reusable and make building large-scale applications so much easier. In this course, Juri Stumpflohner will take us through the specific use case of of creating a tabbed component which allows us to dynamically define new tabs.

On our journey of implementing this component we will learn about how we can dynamically instantiate components, leveraging the `ComponentFactoryResolver` and `ViewContainerRef`.

Furthermore we will explore how to define view templates, how to pass them to our dynamically instantiated components as well as how to pass data into those templates. All of this will be powered by `ngTemplateOutlet` and `ngTemplateOutletContext`.

Create Dynamic Components in Angular

Developers usually have a love-hate relationship with CSS and styling user interfaces. But it is a fundamental part of creating nice-looking, adorable and successful user interfaces. In this course we will take a deep dive into the various possibilities Angular offers for styling components. We learn about the different APIs, how they allow us to conditionally apply one or multiple styles in the form of style attributes and CSS classes. We also explore the concept of style encapsulation and how it helps prevent our styles from leaking into other components.

Understand How to Style Angular Components

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently frameworks, such as Ionic and React Native, have been come out to create a similar web development workflow in a native environment. 

Ionic 2 builds on top of Angular to offer a complete framework for building mobile apps using HTML, CSS, and Javascript that target native mobile and the browser. We’ll work with the RandomUser API to create an employee directory that will let us view user details, update that information, and pass the data back and forth with Ionic 2 routing.

Building apps with Ionic 2

NativeScript has the ability to write Objective C, Swift and Java apis directly from JavaScript and TypeScript. 

In this course, we will learn how to code directly against these native api’s with NativeScript for Angular. Many libraries are written and published in these languages. With NativeScript you are no longer limited to just JavaScript based libs, but have direct access to these api’s right from JavaScript/TypeScript. Let’s look at how to include these native libraries internally to your project as well as build public plugins to share with the community. 

We will cover some considerations with Objective C and Swift based libraries as well as Java/Android libraries. You can think of CocoaPod, Gradle, and Android Arsenal like npm for native libs. iOS libraries can be found via CocoaPods, Android libraries can be found via Gradle or Android Arsenal. 

Let’s also cover how to write custom view components based on native libs since there are considerations for both iOS and Android. Lastly we will learn how to best handle cases where a plugin/library only supports 1 platform.

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

Topics

Instructors

Content Type