Learn Android, Cycle and Edge

A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.


HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Optimize User Experience for Mobile Devices and Browsers

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

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

nativescript

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at [Filestack’s Android SDK](https://github.com/filestack/filepicker-android) built with Gradle. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it.

Use an Android library in NativeScript for Angular using Java apis

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

Java has been around a long time and when it comes to Android, you will encounter some structures that may throw you for a loop on how to code against with NativeScript. Let’s examine a few common Java/Android api constructs you may encounter and how to translate them to NativeScript. Learn how to get references to local files in your app using the ‘file-system’ module as well as how to take advantage of NativeScript’s Observable class to send notification events from one class to another. Lastly, look at considerations with Angular’s NgZone when handling your native libraries data events to update component view bindings.

Translate common Java/Android APIs into NativeScript for Angular Android apps

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

One of the exciting benefits you have with NativeScript is the ability to write native code (Java and Objective C) directly in JavaScript/TypeScript allowing you to create a consistent high level api over top of both underlying iOS Objective C/Swift and Android Java apis. In this lesson, we will look at how to design a consistent api that taps into the appropriate native api’s on the target platforms using underlying native libraries.

Develop a consistent plugin api across your Android and iOS NativeScript app

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

To prepare your development environment to code against native apis such as Objective C, Swift and Java, let's learn how to [install tns-platform-declarations](https://www.npmjs.com/package/tns-platform-declarations) to provide rich intellisense support for all the native iOS and Android api’s. This lesson will cover how to modify your tsconfig.json and references.d.ts properly to ensure working with native api’s is smooth and as helpful as possible.

Prepare for native iOS and Android api intellisense with NativeScript

Building a custom NativeScript XML view component for Android is uniquely different than it’s iOS counterpart because of the Android Context which must be considered. Let’s look at how to properly build a custom view component based on an underlying native view widget. We will also look at what happens when our include.gradle file is not setup properly including handling problems with minimum sdk targets with plugins. Specifically, we will implement this Android widget representing the [Google I/O 2016 clock](https://github.com/lypeer/GoogleClock). Learn how to create a custom AndroidManifest.xml inside your plugin to merge with your app's manifest to override certain characteristics. Read detailed documentation about the [Android app manifest file](https://developer.android.com/guide/topics/manifest/manifest-intro.html).

Build a custom NativeScript view component for Android

edge

Coding for accessibility? You should get familiar with the accessibility tree, a structure produced by platform Accessibility APIs running parallel to the DOM, which exposes accessibility information to assistive technologies such as screen readers. There are multiple tools for visualizing this tree; in this lesson we'll look at Chrome and Microsoft Edge. For more on Accessibility APIs, refer to this [amazing article by Leonie Watson](https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/). For a how-to on setting up the Chrome Accessibility Inspector, visit [bit.ly/chrome-a11y](http://bit.ly/chrome-a11y).

What is the Accessibility Tree?

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

Once we have a labeled slider component inside the main function, we should be able to create another labeled slider. This lesson teaches how to accomplish that, and make sure those two instances work independently of each other.

Use Multiple Independent Instances of a Cycle.js Component

We added classNames to pre-processing and post-processing steps when calling the LabeledSlider, in order to instances independent of each other. It would be better if we could hide these steps away. This lesson introduces the isolate() helper function to achieve that.

Isolate Component Instances in Cycle.js

This lesson is the first in an introduction to Cycle.js. We will see how to build from scratch a toy version of Cycle.js. See how to use RxJS to create simple web apps, and how to separate logic from effects.

Separate Logic from Effects in Cycle.js

We need to give structure to our application with logic and effects. This lessons shows how we can organize our code into two parts: main() function for logic, and effects functions for effects.

Organize Code in the Main and Effect Functions

How can we show one string on the DOM, and a completely different string on Console log? This lesson shows how we can make our main function return multiple Observables, each one targeted at a different type of effect.

Customize Effects from the Main Function

What if we wanted to change the behavior of our app reset the timer every time the mouse *hovers* over it? Currently we only support clicks, and they are hard coded in the DOM Driver. This lesson will introduce DOMSource.selectEvents(), a way of making the DOM Source rich and allowing the main() function to determine which read effects it needs.

Fine-grained Control over the DOM Source in Cycle.js

Now you should have a good idea what Cycle.run does, and what the DOM Driver is. In this lesson, we will not build a toy version of Cycle.js anymore. Instead, we will learn how to use Cycle.js to solve problems. We will start by making a simple Hello world application.

Read Text Input in a Cycle.js Hello World Application

Usually we use template languages like Handlebars, JSX, and Jade to create. One simple way we can create our own template language is to write a function that returns these objects for us. This lessons shows how we can use these functions as a DSL to create our DOM description objects.

Use Hyperscript in Cycle.js as an Alternative to Template Languages

So far we have been writing very small apps in Cycle.js. Let's start growing the size of the apps we build. This time, we will see how to build a simple Body-Mass Index Calculator. We'll see how as our application grows there are three distinct sections: handling read effects, handling write effects, and handling internal state.



Topics

Instructors

Content Type

Free or Pro