Learn Cycle, Egghead and Ionic

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

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

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

Tips and Tricks

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

This is the video companion to the [egghead.io Instructor Guide](https://howtoegghead.com/instructor/).

Screencasting is hard! There are virtually infinite ways to produce one. For an egghead.io lesson we expect several key aspects to be met. We want to make sure that our lessons have depth and clarity. Clarity is important and starts with the technical aspects of recording your screen and voice. Once we have achieved this objective level of clarity, we dip into the stylistic aspects of recording a lesson. The style is subjective, and the goal of an egghead.io lesson is not to have an army of uniform drone producing flavorless video content for the masses.

Our mission is to make you a badass screencaster. We want to push you to another level. We've found that a small set of standard practices will create an awesome experience for the student, and eliminate frustration as we teach by providing a repeatable pattern for success. It’s not complicated. In fact, it is simple, but it isn’t easy.


This course will show you how to produce an egghead.io lesson. We strive for consistency in style, and these lessons will demonstrate the core elements that create our brand screencasts. Let’s learn how together.

Bite-size video tutorials for badass web developers.

egghead

Record Badass Screencasts for egghead.io

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream. 

Cycle.js builds on functional and reactive streams and is a JavaScript framework. What does that mean? In the course, André Staltz, the creator of Cycle.js, will explain it to us.

We'll start this course with an empty project and build out our own toy version of Cycle.js to understand exactly what's going on under the hood. When we have a solid base of how Cycle.js works we will move on to use the Cycle.js API and build an app using the Model-View-Intent pattern.

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an event stream.

cycle

Cycle.js Fundamentals

We are starting to get a better architecture for these UI apps. But we still have a problem of repeating code for the sliders, since they share so much in common in looks and functionality. This lessons shows how we can create a generic labeled slider as a main() function receiving properties as sources.

Create a Generic Cycle.js Component

Any extra information on the screen will easily distract the audience from the purpose of your lesson. Do your best to remove any extra notifications, UI, or other information that would take away from what you're teaching.

Remove Distractions

Any information you would want to put into an Intro or Outro belongs in the accompanying description, title, course page, etc. The lesson is only for showing the process. Talking about yourself, the lesson, or other lessons is a waste of time.

Avoid Intros and Outros

Our app is not yet a BMI calculator, because it only has two sliders, but doesn't show the calculated BMI number. In this lesson we will learn how to export any stream from a child component and use it in the parent component, in order to display the BMI calculation on the DOM.

Export Values from Components through Sinks in Cycle.js

Tangents are opportunities for other lessons. When you find yourself drifting off-topic because you feel you _need_ to explain  some code you wrote, consider how that piece of code fits back into a "How do I?" question, then come up with a separate lesson to capture it.

Stay on Topic

This lesson shows what can be learned next as a continuation of this course, and gives a recap on the core concepts: main for pure logic, drivers for side effects, run() to connect main and drivers, sources for read effects, sinks for write effects, and nesting Cycle.js apps to work as components.

Overview of Cycle.js

Recording can be intimidating, so it's best to just hit the record button and start talking. Take it one thought at a time. Sit quietly, think about what you're going to say/type, then do it. If you mess, up, undo back to when you were quiet and try again. Once you get a good take, move on to the next thought. The ideal raw recording is a ton of bad takes and one good take for each thought. So when you get to the editing phase, you quickly clear out the bad takes and leave the good ones.

Record One Thought at a Time

Editing a raw lesson video is a very simple process. You simply watch your own lesson and edit out all the bad takes and dead space using the "Ripple Delete" command. You will be left with a nice, cut lesson ready to export and upload.

Edit with Ripple Delete

Video is a one-way form of communication, so user's don't have the chance to ask you to clarify or ask "Where does X fit in?" This places the burden on you to guide their eyes as you explain how all the little pieces of the code fit together. When your application has a "flow", "X triggers Y, Y triggers Z", make sure to "show the flow" by walking them through where each chunk of code fits. This involves a lot of mouse movement (or fancy keyboard selection shortcuts) and hightlighting to bring it all together.

Guide Their Eyes

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

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

Let's see next how to use the HTTP driver to generate requests and capture responses. We will build a small app to fetch a single piece of data from a REST server and display that on the DOM.

Fetch Data using the Cycle.js HTTP Driver

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

Code is usually pretty good at explaining itself. So it's best to just start writing code while you talking about it, then see if any additional explanation is required. When you fall into the trap of a long-winded explanation before you begin coding, you risk confusing the audience or unnecessarily repeating yourself.

Search

Search Results