Learn Angular, Express and React-native

You've seen that Angular signals are here, and know that signal-components are coming up.

This marks a paradigm-shift towards reactive programming in Angular.

Are you ready?

What if you could start learning signals and feel pleased with your progress? And reach a point where you feel confident when using signals in production?

And feel ready when signal-based components come?

Changes are coming, and you can get ahead of them.

By taking this cousre you will learn how to:

- Create computed signals
- Share your signals in services
- Use and cleanup signal effects
- Turn signals into observables and vice versa
- ... and more

In 52 minutes over the course of 20 bite-sized lessons, you'll learn everything you need to know to take advantage of signals now and be prepared for signal-based components!

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

Modernize State Management in Angular with Signals

Expo Application Services ([EAS](https://expo.dev/eas)) is a cloud build service used to build and publish React Native apps.

This course will show you how to create the common types of builds for iOS and Android on EAS. We'll cover Development builds for local development, Preview builds for internal testing, and Production builds for release.

Additionally, you'll learn about:
- app versioning
- automatic store uploads
- setting up store listing pages
- installing multiple app variants on the same device
- installing past builds with [Expo Orbit](https://docs.expo.dev/build/orbit/)

## iOS

An overview of build signing, and why an Apple Developer account needed in order to install builds on a real device.

How to create:
- an iOS simulator build
- a build to use on your device for local development
- a build to share with your team without uploading it to App Store Connect
- a release build to use on the App Store

You will also learn how to upload your build to App Store Connect, share it on TestFlight and create a Release.

## Android

How to create:
- a build to use for development on an emulator or a device
- a build to share with your team without uploading it to Google Play
- a release build to use ob Google Play

We'll cover what is needed to create a new Google Play account, and the current restrictions for individual accounts.

You will also learn how to set up auto-submit on Google Play.

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

Build and Deploy React Native Apps with Expo EAS

Get started building web applications with Angular and Firebase.

In this course, you'll learn how to set up and use Firebase in your Angular applications using the AngularFire library.

We choose the AngularFire library because it is an official library created by the Firebase and Angular teams to work better with Angular.

It helps you by wrapping everything into observables and helps update zones. 

By the end of this course, you'll be able to build web applications using Cloud Firestore as your database, Firebase Authentication as your Auth system, Cloud Storage to save files, and Firebase Hosting to deploy your applications to the web.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Full Stack Web Applications with Angular and Firebase

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 v5

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Add Github Login to Your Web App with OAuth 2.0

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

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

express

Build a REST API with Express 5 and node 14

**Note**: This course is still valid for Angular ^17 but the set up has changed.

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)

A skeleton loader is a popular UI pattern for loading screens: instead of a spinner, we show static or an animated placeholder for the information that is still loading. 

In this course, we go through 3 instrumental libraries for React Native - Linear Gradient, Masked View, and Reanimated 2 - and in the end, we use them in tandem to build a Skeleton Loader.

**Linear Gradient** [Expo](https://docs.expo.dev/versions/latest/sdk/linear-gradient/) | [Pure React Native](https://github.com/react-native-linear-gradient/react-native-linear-gradient)

**Masked View** [Expo](https://docs.expo.dev/versions/latest/sdk/masked-view/) | [Pure React Native](https://github.com/react-native-masked-view/masked-view)

**Reanimated 2** [Expo](https://docs.expo.dev/versions/latest/sdk/reanimated/) | [Pure React Native](https://github.com/software-mansion/react-native-reanimated/)

This course is built using an iOS simulator on plain React Native. Still, it will work on Expo and Android (you'll need to follow the relevant installation instructions available in the documentation).

The finished code for the skeleton loader (last 2 lessons) is available on [Expo Snack](https://snack.expo.dev/@kadikraman/animated-skeleton-loader).

Building a Customizable Animated Skeleton Loader in React Native

How to create buttons in React Native depending on the level of desired customisability: the quick and simple Button, a more customisable Touchable, and the most customisable Pressable.

Button component is useful for quick prototyping.

TouchableOpacity is the most common way of creating buttons and other touchable areas, and is suitable for most use cases.

Pressable gives you the most control over the look and feel of your button, including customising the pressed state and text, as well as handling long presses separately from regular presses.

Creating Buttons in React Native with Three Levels of Customization

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

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

If you already know React, then React Native is a great way to build mobile apps for iOS and Android. Of course, web and mobile apps are very different to build — but this course serves as your guide.

In this course, we’ll build a mobile app from start to release with React Native for both iOS and Android. Prior React experience is required, but you don’t have to know anything about mobile development to participate.

Throughout the course, we’ll be building a “Restaurant Review” app. We’ll use all the standard mobile UI elements like text, images, form inputs, buttons, scroll views, and icons, and we’ll show several navigation techniques like push, modal, and tabs. The app will make HTTP API calls to a server and will store data on the device with AsyncStorage. Finally, we’ll specify a custom app icon and splash screen, deploy the app to a physical device, and prepare the app for release to the App Store and Play Store or for ad-hoc release.

Build a React Native Application for iOS and Android from Start to Finish

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

***Note: RxJS imports have changed since the publication of this course. The concepts being taught on RxJS are still applicable.**

Angular has many built-in features for working closely with RxJS to help you build entirely reactive applications. This course will teach you how to use Angular with RxJS. We will learn how to use the ngrx/store library to manage state in a clean, reactive "Redux style."

This course assumes you've got a working knowledge of Angular and reactive programming with RxJS. If you don't, you might want to watch the following courses to get you up to speed! 
- [Get Started with Angular](https://egghead.io/courses/get-started-with-angular) 
- [Introduction to Reactive Programming with RxJS](
https://egghead.io/series/introduction-to-reactive-programming). 
- [Step by Step Async Programming with RxJS](https://egghead.io/series/step-by-step-async-javascript-with-rxjs) 
- [Getting Started With Redux](https://egghead.io/series/getting-started-with-redux), a course by Redux's, Dan Abramov.

We also have Intermediary Angular courses if you'd like to acquire more in-depth knowledge. 
- [Dependency Injection](https://egghead.io/courses/angular-2-dependency-injection-di-explained
- [Components, Directives](https://egghead.io/courses/building-angular-components)
- [Forms](https://egghead.io/courses/intro-to-angular-forms)
- [Router](https://egghead.io/courses/intro-to-angular-router)
- [Animating Web Apps](https://egghead.io/courses/animate-angular-web-applications)



Build Redux Style Applications with Angular, RxJS, and ngrx/store

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

React makes it intuitive to build real-world web application. But in reality, you need to use a host of other services to get the app in front of real users. 

This course walks you through setup and implementation to get your cloud-based application up and running. 

You’ll learn to set up:
* a new project in AWS Amplify configured to your React app
* user authentication with Amazon Cognito 
* managed GraphQL with AWS AppSync
* image storage and retrieval with Amazon S3
* text translation via Lambda functions
* and finally, deployment of your application on AWS using Amazon S3

You’ll finish the course ready to quickly and easily deploy your serverless React application, so users can start using and enjoying it right away.

Building Serverless Web Applications with React & AWS Amplify

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Nodejs

Protect yourself from unexpected charges by learning how to use Firebase emulators. 

By using Firebase emulators you no longer have to create a second dev firebase project to avoid using production data. You also don't run the risk of having a cloud function crash and run up a huge bill.

In this course, you'll learn how to set up and use Firebase's authentication, function, and Firestore emulators. You will also learn how to safely set up Cloud Function emulation, import seed data into your emulators, and disable the emulators in production.  

By the end of this course, you'll be able to confidently set up a safe environment for testing in your own applications!

firebase

Local App Development with the Firebase Emulator Suite

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

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

Topics

Instructors

Content Type