Learn Dart, Gulp and Immutable

Dart is an object-oriented language you can use for building web applications, server-side code, and even mobile apps. It’s expressive, powerful, and has a friendly learning curve. 

In this course, we will look at the syntax and semantics of the Dart programming language. We will also cover various aspects of the Dart ecosystem, including its tools and packages that help make you a productive developer. This knowledge is applicable when developing software for client, server, and especially mobile with the Flutter framework. 

This course is beginner-friendly, but is well-suited for experience programmers as well. 

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

dart

Get Started with Dart

Immutable.js provides many Persistent Immutable data structures including: List, Stack, Map, OrderedMap, Set, OrderedSet and Record.

immutable

There are lots of techniques for accessing data kept in your Lists. In this lesson, we will compare how data stored in collections can be accessed directly in both standard Arrays and ImmutableJS Lists. We will also look at how to find data inside an Immutable List using the `findEntry` and `findIndex` methods.

Get items in an ImmutableJS List

The reduce function in ImmutableJS allows you to transform and create new data from an existing data structure. In this example, we will do some math and calculate a sum based on data in an ImmutableJS Map.

Calculate a sum using reduce in ImmutableJS

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

gulp

Building upon the `watch` task that we begin this lesson with, we’ll look at how to create a local development server using the `app` directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public `.stream()` method that is designed exactly for this purpose.

Gulp and Browserify - Adding Live Reload with Browsersync

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

babel

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using `exorcist`.

Gulp and Browserify - Adding Babel & Source Maps

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

browserify

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single `bundle.js` file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by `gulp.dest` and finish by writing the bundle to a `dist` directory.

Gulp and Browserify - Initial Setup

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

Installing and Writing a Default Task with Gulp

The key to being productive with Immutable JS is understanding how to update values that are nested. Using `setIn` you can place a new value directly into an existing or new path. If you need access to the previous value before setting the new one, you can use `updateIn` instead. `updateIn`  accepts the same path lookups as `setIn`, but gives you a callback function instead so that you can use the previous value however you wish and return an updated version.

Updating nested values with ImmutableJS

ImmutableJS reduce functions can be nested to get data out of complex data structures. In this example, we will create an Immutable List from an Immutable Map that is nested inside of an Immutable List that is itself nested inside of an Immutable Map.

Create a list with nested reduce functions in ImmutableJS

By utilizing immutable data structures, we can write code that is easier to reason about, avoid mutation-related bugs, reduce complexity, and even gain some performance benefits along the way.

Before diving too far into Facebook's [Immutable.js](https://facebook.github.io/immutable-js/) library, let's take a moment to examine some of the pains and obstacles that mutable data structures present. 

We'll take a brief glimpse at putting the Immutable "List" data structure to work by example. We will convert our usage of Javascript's native `Array` to use [Immutable.List](https://facebook.github.io/immutable-js/docs/#/List) in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

Immutable.js: Introduction - Easing the Pains of Mutability

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task `watch` & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

Gulp and Browserify - Hooking up Watchify

In this lesson we'll look at some of the differences between standard JavaScript Arrays and Immutable Lists. We'll create Immutable.JS Lists from scratch, as well as by converting regular Arrays. We will also compare and contrast the `push` and `concat` methods between both types of collection.

Create an immutable List using Immutable.js

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

Bundling Your JavaScript Files with Gulp

In this lesson, you will write a basic HTTP server in the Dart programming language. We will be using the HttpServer class from Dart's inbuilt 'dart:io' library to achieve this.

Dart is an object-oriented programming language by Google, which aims to help the developer build modern web applications. It covers client, server and now mobile with Flutter. It comes with a range of tools including a virtual machine, core libraries, and package management repository, lending enough ammunition to start your next project.

Learn more at https://dartlang.org


Write a Basic HTTP Server in Dart

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

flutter

In this lesson, we will cover Interfaces and Mixins. Interfaces act as a contract containing properties and methods that a class must define once it “implements” this interface. Mixins are Dart’s way of sharing properties and methods from multiple classes, since by design Dart adopts a single-inheritance model.

Define Interfaces and Share Class Members through Mixins in Dart

Futures represent a computation that does not complete immediately. Where a normal function returns a result, an asynchronous function returns a Future that will eventually contain the result. These are similar to Promises in JavaScript. In this lesson, we will learn how to program asynchronously by writing logic to capture values that are returned at a later time.

Capture and Return Asynchronous Values with Futures in Dart

Streams represent a sequence of asynchronous events. Each event is either a data event, also called an element of the stream, or an error event, which is a notification that something has failed. When a stream has emitted all its events, a single "done" event will notify the listener that the end has been reached. In this lesson, we will learn how we can capture and handle streaming data, working with various Stream classes.

Capture and Handle Data Sequences with Streams in Dart

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

Pub is a package management tool that makes it easy for you to install, use, share Dart libraries, command-line tools and other assets. It comes as part of the Dart SDK, and requires a dependency file called pubspec.yaml.

Manage Package Dependencies with Pub

We will learn how to work with Strings using a variety of methods made available in the **dart:core** library. We will explore the top methods for working with String values.

Learn more about Strings at https://api.dartlang.org/stable/2.2.0/dart-core/String-class.html

Manipulate Strings in Dart

We will learn how to work with Lists using a variety of methods made available in the **dart:core** library. We will explore the top methods for working with List type collections.

Learn more about Lists at https://api.dartlang.org/stable/2.2.0/dart-core/List-class.html

Search

Search Results