Learn Angular, React-native and Screen-reader

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

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Develop Accessible Web Apps with React

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

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

Building a Customizable Animated Skeleton Loader in React Native

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.

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

Reactive State Management in Angular with ngrx

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

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

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

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

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

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

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

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)

React Navigation makes the easy things easy and the hard things possible. This course will help you understand how to customize and use React Navigation for more complex navigation patterns.

You'll learn different ways to display content within the navigators, which demonstrates the built-in customizations within React Navigation. As well as learn how to interact with different UI components within React navigation, which will help you structure your application. 

Building off this, you'll learn how you can customize the default navigator behavior to provide a custom look and feel to your React Navigation application

To succeed in this course, you’ll want a basic understanding of the React Navigation API and how to use the default navigators.

Note: React Navigation has been updated to v2. This course was recorded on v1.x and the lesson code has been updated to reflect v2. The principles and patterns taught in the videos remain valid.

React Navigation for Native Mobile Applications

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

Search

Search Results