Learn Android, Angular-cli and Clojurescript

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

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

ClojureScript is a compiler for Clojure that targets JavaScript. It emits JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

clojurescript

In this lesson I show you how to get and manipulate command-line arguments in Clojure/ClojureScript by writing a small program that greets you by name. I also show how comments are delimited, how to get a value out of a sequence, how to bind a symbol to a value, and how to define a function.

Handle command-line arguments in ClojureScript


Clojure is a dynamic, general-purpose programming language, combining the approachability and interactive development of a scripting language with an efficient and robust infrastructure for multithreaded programming. Clojure is a compiled language, yet remains completely dynamic – every feature supported by Clojure is supported at runtime. Clojure provides easy access to the Java frameworks, with optional type hints and type inference, to ensure that calls to Java can avoid reflection.

clojure

In this lesson I show what a Clojure keyword is and why we prefer them as keys in maps; and the three ways we can look up a value in a map.

Keywords and Map Lookup in Clojure and ClojureScript

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

flutter

In this lesson we’ll learn how to style Text & Container widgets & also get a general understanding of how styling works in Flutter applications

Style a Flutter Text and Container Widget

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

Progressive Web Apps can speed up app loading times, and even allow you to run your web app offline, and install it on a mobile device!  However, setting up a PWA correctly can be tricky.

In this course, we'll create a PWA from start to finish, using create-react-app.  We'll create a custom service worker, and use different caching strategies for different types of assets.

Finally, we'll look at how to install the app on both iOS and Android devices, and how to customize the app name, icon, and splash screen.

Course Introduction: Progressive Web Apps in React with create-react-app

In this lesson we’ll learn how to use themes in order to share colors and font styles throughout our application.

Using Themes in Flutter to Share Colors and Font Styles

In this lesson we’ll learn how to render both local & network images in a Flutter application using the Image class.


Load an Image in a Flutter App with the Image Class

In this lesson we’ll learn about the main layout widgets you'll need when building your user interface in Flutter. We’ll take a look at Container, Center, Row, Column, Stack, & GridView widgets learn how they work.

Building Layouts in Flutter with Layout Widgets

In this lesson we’ll learn how Navigation in Flutter works by navigating to a new page when clicking on a button using the push & pop methods. We'll also look at how to pass properties to a new screen dynamically.

Getting Started with Navigation in Flutter

In this lesson, we'll learn how to specify a configuration object containing all of the routes for our application & navigate between them in a Flutter application.

Navigation with Named Routes in Flutter

ListView is the most commonly used scrolling widget in a Flutter application. In this video, we'll learn how to create dynamic lists using Flutter's ListView widget to render both lists of Strings & lists of Maps

Building Dynamic Lists in Flutter with ListViews

In this lesson we’ll learn how to fetch & then display data from an API over the network in a Flutter application using the http package.

Fetching & Displaying Data from an API in Flutter using the http Package

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

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

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

angular-cli

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

Generate components with the Angular CLI

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

Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications.

In this lesson you will learn how to install the Angular CLI from npm, create a new application, serve the new application in the browser and edit it with live-reload.

Install the Angular CLI to Create and Serve an Angular Application

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

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.


Writing Platform-Specific Components for iOS and Android in React Native

In this lesson we will our `UiModule`, that has a `LayoutComponent`, `HeaderComponent` and `FooterComponent`. 

We generate `UiModule` by running the following command:
```
ng generate module ui --module app
```

This generates the new module and imports it in our `AppModule`.

We'll create the `LayoutComponent` using:
```
ng generate component ui/containers/layout
ng generate component ui/containers/header
ng generate component ui/containers/footer
``` 

We update our `AppRoutingModule` and add this component to our first route to make it visible. 

The `HeaderComponent` and `FooterComponent` are referenced in the LayoutComponent and we implement the actual templates!

Topics

Instructors

Content Type