Learn Ionic, Ramda 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

Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code.

A library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

ramda

Functional Programming in JavaScript with Ramda.js

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.

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

Building apps with Ionic 2

You can really unlock the power of ramda (and functional programming in general) when you combine functions. Counting words in a string may seem like a relatively difficult task, but ramda makes it easy by providing a `countBy` function.  This lesson walks through using the `countBy` to count words in a string.

Count Words in a String with Ramda's countBy and invert

screen-reader

There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

Gesture driven lists are a great way to take a simple UI element and make it fun. We'll look at how we can make swipe-able list items to reveal additional functionality, as well as being able to drag and reorder list items.

Use Sliding Gestures to Reorder an Ionic 2 List

In this lesson we will walk through how to break out code into it's own provider using the CLI. Ionic’s CLI provides a generate command that will quickly help create common components, pipes, providers, and much more. To see what kind of generators are available, run `ionic g --list` in your terminal. 

Use the Ionic CLI to Generate Angular 2 Mobile Components

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use `over` to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

Update Component State in React With Ramda Lenses

The simplest way to display data in an app is with a simple listview. This list will go over how items work and how to place certain elements in ion-items position slots.

Build your first page component with Ionic 2

Ionic offers a few different layouts, including a side menu-based one. We’ll setup a simple side menu layout from scratch and see how it behaves on different devices. For instance, if you're users are on an Android device, the side menu (and really, the whole app) will look and behave like a native Android app. As the user swipes from the side, the menu will overlay the main content. For iOS, the menu will not move, but the app's main content will instead. 

Create a Native Mobile Side Menu Layout in Ionic 2

Ionic’s NavController offers an extensive API that allows you to manipulate your apps history, create history from nothing, and programmatically navigate back. NavController has an extensive API with many methods and lifecycle hooks that developers can use. Be sure to check out the [documentation](http://ionicframework.com/docs/api/navigation/NavController/)

Use Ionic 2 NavController to Manipulate App History

A common UI pattern in mobile apps is to be able to “pull” down on a list and fetch more data, or scroll and load more. This kind of pattern is built into Ionic with the ionRefresher component and ionInfiniteScroll component.


[Infinite Scroll](http://ionicframework.com/docs/2.3.0/api/components/infinite-scroll/InfiniteScroll/) and [Refresher](http://ionicframework.com/docs/2.3.0/api/components/refresher/Refresher/) can be heavily customized as well. Both components allow you to change what is shown as the user begins to perform their action. This allows for a much more customized experience!

Lazy Load Data with Ionic 2

Ionic 2 has it’s own navigation system that that makes it straightforward to link components. We’ll look at how to take data from one template and pass it to another using Ionic NavController. 

Instead of thinking in terms of URLs and hrefs, NavController allows devs to think in terms of a component stack. To navigate forward to a new view, a developer pushes a new component on to the navigation stack. To go back, the component is popped from the stack. This push/pop metaphor is borrowed from traditional native development and allows for a more flexible navigation paradigm.  

Navigate Between Mobile Screens  with the Ionic 2 NavController

Ionic’s CSS and JS can detect what platform a user is on, and adjust to make sure you’re getting the correct interface. To preview this locally, you can use the CLI’s `--lab` flag to see what your app will look like before it’s even deployed to a device.


Preview an Angular 2 Mobile  App with Ionic Lab

Ionic provides a common API for displaying many overlay components, like Alerts, ActionSheet, Modals, and Popovers. We'll look at a few of the APIs and see how to interact with them. To learn more about these different APIs, be sure the view the documentation on them:

- [ModalController](http://ionicframework.com/docs/2.3.0/api/components/modal/ModalController/)
- [ViewController](http://ionicframework.com/docs/2.3.0/api/navigation/ViewController/)
- [AlertController](http://ionicframework.com/docs/2.3.0/api/components/alert/AlertController/)

Create an Overlay Component with the Ionic 2 Overlay API

Cards have become a common way to handle layout and display information in a easy-to-understand format. Ionic offers utility components that make creating cards straightforward. These components, like `ion-card`, `ion-card-content`, and `ion-card-header` are included in the framework to speed up the development process. There's no JavaScript behind these components, they're really just css driven. 

Create Angular 2 Mobile Card based layouts with Ionic 2

We’ll go over requirements needed to create a project and how to install the ionic CLI for project creation. Once it’s installed, we’ll start a project, specify an app name, and reuse a starter template for our project.


Start an Ionic 2 App with the CLI

A typical app will interact with some sort of remote API at some point. We’ll creating a simple provider class to fetch data from the Random User API and populate our apps UI with this data.

The `IonicModule` in this lesson provides some default Angular modules for convenience. As of Ionic 2.x.x, those modules include Angular's `BrowserModule`, `HttpModule`, `FormsModule`, and `ReactiveFormsModule`


Fetch data from an API using Angular 2 HTTP module 

When doing comparisons inside of functions, you end of relying heavily on the argument passed into the function. Ramda's `converge` allows you to do comparisons in a Point-Free style allowing you more flexibility with composing and constructing functions. This lesson walks through refactoring a function to Point-Free style using Ramda's Converge.

Eliminate Function Arguments (Point-Free Style) with Ramda's Converge

In this lesson we'll take a stateful React component and look at how we can refactor our `setState` calls to use an updater function and then leverage Ramda's `evolve` function to make our updater function a reusable utility that isn't tied to the React API.

Search

Search Results