DEV Community: Mohammed Salman

Dart: Asynchronous programming — Futures

Mohammed Salman — Sat, 09 Mar 2019 14:18:59 +0000

Asynchronous programming is a form of parallel programming that allows a unit of work to run separately from the primary application thread. When the work is complete, it notifies the main thread (as well as whether the work was completed or failed). There are numerous benefits to using it, such as improved application performance and enhanced responsiveness.

TLDR;

Problem

Dart code runs in a single thread of excution, if it’s blocked the entire program freezes.

Example

//..

var data = fetchDataFromSomeApi(); // Takes time while fetching data

doStuffWithData(data); // Manipulate the data

doOtherStuff(); // Do other stuff unrelated to the data

//..

Since fetchDataFromSomeApi() blocks, the remaining code runs only after fetchDataFromSomeApi() returns with the data, however long that takes.

This code runs line by line causing the code to halt and doOtherStuff() to run after the data fetching operation is finished (which is probably not what you want).

Solution

Asynchronous operations lets your program complete other work while waiting for other operation to finish.

Same example above but with an asynchronous approach

fetchDataFromSomeApi().then((data) {
 print('Fetched data');
 doStuffWithData(data);
});

print('Working on other stuff...');
doOtherStuff();

// Output:
// Working on other stuff...
// Fetched data

fetchDataFromSomeApi is non-blocking, meaning it lets other code run while fetching data. Thats why the top level print statement runs before the print statement in the callback function.

Futures

A Future represents a computation that doesn’t complete immediately. Where a normal function returns the result, an asynchronous function returns a Future, which will eventually contain the result. The future will tell you when the result is ready.

Future objects (futures) represent the results of asynchronous operations — processing or I/O to be completed later.

We can create a future simply like this

Future future = Future();

let’s define a function called f

String f() => 'work is done!';

and pass it to the future

Future<String> future = Future(f);

notice that the future takes the same type of the function f return type __String.

for the purposes of this tutorial we passed a function that just returns a string.

This creates a future containing the result of calling f asynchronously with Timer.run.

If the result of executing f throws, the returned future is completed with the error.

If the returned value is itself a Future, completion of the created future will wait until the returned future completes, and will then complete with the same result.

If a non-future value is returned, the returned future is completed with that value.

then

let’s call then on the future and pass a function that takes the output of the asynchronous operation as an argument

future.then((String val) => print(val)); // work is done

we can simplify it by passing the print function only because it takes a string

future.then(print); // work is done

Error handling

To catch errors, use try-catch expressions in async functions (or use catchError()).

catchError

let’s imagine that our future throws an error at some point

Future future = Future(() => throw Error());

if we call then on the future without handling the error it will throw the error and stop the excution of our program

future.then(print); // Error: Error: Instance of 'Error'

let’s define a function that takes an error and handles it

void handleError(err) {
 print(‘$err was handled’);
}

then append catchError() to the future and pass handleError

future.then(print).catchError(handleError); // Error: Error: Instance of 'Error' was handled

this way the error is handled and the program keeps excuting.

Async, Await

To suspend execution until a future completes, use await in an async function (or use then()).

to use the await keyword it has to be inside an async function like this:

main() async {
 Future future = Future(() => ‘work is done’);
 String res = await future;
 print(res); // work is done
}

Notice that the main function is marked with the async keyword.

Any function marked with async is called asynchronously.

when we call a future with the await keyword the function excution is halted until the future returns a value or throws an error.

we can handle future errors using a try-catch expression:

main() async {
 Future future = Future(() => throw Error());
 try {
   print(await future);

 } catch (e) {
   print(‘$e was handled’); // Instance of 'Error' was handled
 }
}

Conclusion

Dart code runs in a single “thread” of execution.
Code that blocks the thread of execution can make your program freeze.
Future objects (futures) represent the results of asynchronous operations — processing or I/O to be completed later.
To suspend execution until a future completes, use await in an async function (or use then()).
To catch errors, use try-catch expressions in async functions (or use catchError()).

If you feel that I have missed something here please let me know, or if you have any question at all you can reach me on twitter.

Other useful resources

Asynchronous Programming: Futures

How to build native desktop apps with JavaScript

Mohammed Salman — Tue, 08 May 2018 22:17:48 +0000

Atwood’s Law: any application that can be written in JavaScript, will eventually be written in JavaScript. -Jeff Atwood

proton native project - index.js

Today we are going to take a look at Proton Native and make a simple hashing app with it.

Unlike Electron apps, apps built with Proton Native are actually native (hence the name) and not web based on chromium.

Proton Native is like React Native but for desktop, It compiles to native platform code so it looks, and performs like native apps.

Windows

install the build tools by running
npm install --global --production windows-build-tools

Linux

you’ll need these libraries:

libgtk-3-dev
build-essential

Mac

You don’t need anything.

Now run npm i -g create-proton-app, and create-proton-app my-app to make a new project.

Open the project directory with your favorite code editor, the directory should look like this:

└───node\_modules
├───.babelrc
├───index.js
├───package.json
└───package-lock.json

index.js should look like this:

As you can see it look like React/React Native File

Just like any React or React Native Project, we import the react library and make a class component.

The App element is just a container that holds the Window and Menu, the Window has three props; title (the window title), size (takes an object that contains the width and height of the window), menuBar (set to false because we don’t want a menu bar).

Before we start coding let’s install crypto using npm:

npm i crypto

We will use crypto to hash the text to md5.

index.js

import React, { Component } from "react";
import { render, Window, App, Box, Text, TextInput } from "proton-native";
import crypto from "crypto";

class Example extends Component {
state = { text: "", md5: "" };

hash = text => {
    this.setState({ text });

    let md5 = crypto
    .createHash("md5")
    .update(text, "utf8")
    .digest("hex");

    this.setState({ md5 });
};
render() {
    return (
    <App>
        <Window
        title="Proton Native Rocks!"
        size={{ w: 300, h: 300 }}
        menuBar={false}
        >
        <Box>
            <TextInput onChange={text => this.hash(text)} />
            <Text>{this.state.md5}</Text>
        </Box>
        </Window>
    </App>
    );
}
}

render(<Example />);

I first imported Text and TextInput so that I could use them later, and then in the class after setting the text and md5 to empty strings in the state object I created a function hash that takes a text argument.

In the hash function, we set the state to text and declare md5 to store the hashed text

this.setState({ md5});
let md5 = crypto.createHash("md5")
.update(text, "utf8").digest("hex");

and set the state object to the updated md5.

this.setState({ md5 });

The render method return some jsx element, the Box element is just like div in React or View in React Native which hold the TextInput and Text because the window element doesn’t allow having more than one child (what is this china … sorry).

TextInput has an onChange prop that will be called every time the text changes, so we set it to a fat arrow function that takes a text argument and returns the hash function we created earlier.

So now every time the text changes text is hashed using md5.

Now if we run it with

npm run start

this window should pop up

and if we enter some text it gets hashed to md5

You might say “It looks ugly let’s add some styling to it” well…at the time of writing this article, Proton Native is still in its infancy, very buggy and it doesn’t support styling (yet) but it’s a fun project to play with.

If you want to contribute to the project check out the repo

If you have any questions or suggestions feel free to comment or reach me on Twitter and don’t forget to hit that clap button :)

Check out the previous article

How to build a news app with React Native

How to build a news app with JavaScript and React Native

Mohammed Salman — Sat, 05 May 2018 11:15:39 +0000

Requirements for building the app:

A basic understanding of the JavaScript language.
Node.js, and react native.
Libraries used: moment, react-native, react-native-elements.

If you’re not familiar with these resources, don’t worry — they are quite easy to use.

The topics we will cover in the post are:

News API
Fetch API
FlatList
Pull down to refresh
Linking

And more…so let’s get started!
You can find the full project repo HERE.

News API

A simple and easy-to-use API that returns JSON metadata for headlines and articles live all over the web right now. — NewsAPI.org

First, you should go ahead and sign up for News Api to get your free apiKey (your authentication key).

Create a new React Native project, and call it news_app (or whatever you want). In the project directory, make a new folder and call it src . In src create a folder an name it components . So your project directory should look something like this:

In the src folder, create a new file called news.js . In this file we are going to fetch the JSON that contains the headlines from the News API.

news.js

const url =
  "https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY_HERE";

export async function getNews() {
  let result = await fetch(url).then(response => response.json());
  return result.articles;
}

Make sure you replace YOUR_API_KEY_HERE with your own API key. For more information about the News API, go to newsapi docs.

Now we declare the getNews function, which is going to fetch the articles for us. Export the function so we can use it in our App.js file.

App.js

import React from 'react';
import { FlatList } from 'react-native';

// Import getNews function from news.js
import { getNews } from './src/news';
// We'll get to this one later
import Article from './src/components/Article';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { articles: [], refreshing: true };
    this.fetchNews = this.fetchNews.bind(this);
  }
  // Called after a component is mounted
  componentDidMount() {
    this.fetchNews();
   }

  fetchNews() {
    getNews()
      .then(articles => this.setState({ articles, refreshing: false }))
      .catch(() => this.setState({ refreshing: false }));
  }

  handleRefresh() {
    this.setState(
      {
        refreshing: true
    },
      () => this.fetchNews()
    );
  }

  render() {
    return (
      <FlatList
        data={this.state.articles}
        renderItem={({ item }) => <Article article={item} />}
        keyExtractor={item => item.url}
        refreshing={this.state.refreshing}
        onRefresh={this.handleRefresh.bind(this)}
      />
  );
  }
}

In the constructor, we define the initial state. articles will store our articles after we fetch them, and refreshing will help us in refresh animation. Notice that I setrefreshing to true, because when we start the app, we want the animation to start while we load the articles.
componentDidMount is invoked immediately after a component is mounted. Inside it we call the fetchNews method.

componentDidMount() {
  this.fetchNews();
}

In fetchNews we call getNews() which returns a promise. So we use the .then() method which takes a callback function, and the callback function takes an argument (the articles).

Now assign the articles in the state to the articles argument. I only typed articles because it’s a new ES6 syntax that means { articles: articles } , and we set refreshing to false to stop the spinner animation.

fetchNews() {
  getNews().then(
      articles => this.setState({ articles, refreshing: false })
  ).catch(() => this.setState({ refreshing: false }));
}

.catch() is called in rejected cases.

handleRefresh starts the spinner animation and call fetchNews(). We pass () => this.fetchNews() , so it’s called immediately after we assign the state.

handleRefresh() {
  this.setState({ refreshing: true },() => this.fetchNews());
}

In the render method, we return a FlatList element. Then we pass some props. data is the array of articles from this.state. The renderItem takes a function to render each item in the array, but in our case it just returns the Article component we imported earlier (we’ll get there). And we pass the article item as a prop to use later in that component.

Article.js

In src/components create a new JavaScript file and call it Article.js.

Let’s start by installing two simple libraries using npm: react-native-elements, which gives us some premade components we could use, and moment that will handle our time.

run using terminal/cmd:

npm install --save react-native-elements moment

In Article.js:

import React from 'react';
import { View, Linking, TouchableNativeFeedback } from 'react-native';
import { Text, Button, Card, Divider } from 'react-native-elements';
import moment from 'moment';

export default class Article extends React.Component {
  render() {
    const {
      title,
      description,
      publishedAt,
      source,
      urlToImage,
      url
    } = this.props.article;
    const { noteStyle, featuredTitleStyle } = styles;
    const time = moment(publishedAt || moment.now()).fromNow();
    const defaultImg =
      'https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Images-HD-Diamond-Pattern-PIC-WPB009691.jpg';

    return (
      <TouchableNativeFeedback
        useForeground
        onPress={() => Linking.openURL(url)}
      >
        <Card
          featuredTitle={title}
          featuredTitleStyle={featuredTitleStyle}
          image={{
            uri: urlToImage || defaultImg
          }}
        >
          <Text style={{ marginBottom: 10 }}>
            {description || 'Read More..'}
          </Text>
          <Divider style={{ backgroundColor: '#dfe6e9' }} />
          <View
            style={{ flexDirection: 'row', justifyContent: 'space-between' }}
          >
            <Text style={noteStyle}>{source.name.toUpperCase()}</Text>
            <Text style={noteStyle}>{time}</Text>
          </View>
        </Card>
      </TouchableNativeFeedback>
    );
  }
}

const styles = {
  noteStyle: {
    margin: 5,
    fontStyle: 'italic',
    color: '#b2bec3',
    fontSize: 10
  },
  featuredTitleStyle: {
    marginHorizontal: 5,
    textShadowColor: '#00000f',
    textShadowOffset: { width: 3, height: 3 },
    textShadowRadius: 3
  }
};

There is a lot going on here. First, we start by destructuring the article prop and the styles object defined below the class.

In render we define time to store the time for when the article was published. We use the moment library to convert the date to the time passed since then, and we pass publishedAt or time from now if publishedAt is null.

defaultImg is assigned an image URL in case the URL of the article image is null.

The render method returns TouchableNativeFeedback (use TouchableOpacity instead if it does not work on your platform) to handle when the user presses the card. We pass it some props: useForground which tells the element to use the foreground when displaying the ripple effect on the card, and onPress , which takes a function and executes it when the user presses the card. We passed () => Linking.openUrl(url) which simply opens the URL to the full article when we press the card.

The card takes three props: featuredTitle which is just a fancy title placed over the image you could use title instead if you want, featuredTitleStyle to style it, and image which is the article image from the article prop. Otherwise, if its null , it’s going to be the defaultImg.

..
  featuredTitle={title}
  featuredTitleStyle={featuredTitleStyle}
  image={{ uri: urlToImage || defaultImg }}
..

As for the text element, it will hold the description for the article.

<Text style={{ marginBottom: 10 }}>{description}</Text>

We added a divider to separate the description from time and source name.

<Divider style={{ backgroundColor: '#dfe6e9' }} />

Below the Divider , we have a View that contains the source name and the time the article was published.

..
<View 
  style={{ flexDirection: ‘row’, justifyContent: ‘space-between’ }} > 
  <Text style={noteStyle}>{source.name.toUpperCase()}</Text>
  <Text style={noteStyle}>{time}</Text>
</View>
..

After the class, we defined the styles for these components.

Now if we run the app:

and we can refresh the app

There you go! The source code for the app is available on GitHub HERE you can improve upon it and make a pull request😄.

I hope you enjoyed my article! If you have any questions at all, feel free to comment or reach me on twitter and I will definitely help :)

Also don't forget to share the article😄👇.