How to use Coffeescript to create a complete application

Part 1th of this series describes how to get started with coffeescript, and explains some of the additional features that are available for developers. The 2nd part describes how to use Coffeescript to solve some programming problems. This article describes how to use Coffeescript to create a complete application.

Coffeescript is a new programming language built on JavaScript. Coffeescript provides neat syntax to attract Python or Ruby enthusiasts, as well as many functional programming features inspired by languages such as Haskell and Lisp.

In part 1th of this series, you learned about the advantages of using Coffeescript instead of using JavaScript alone. You set up the development environment and run the script. In the preliminary understanding of Coffeescript, part 2nd: By hands-on Practice sample learning language, you try to solve mathematical problems in the process of trying a lot of coffeescript characteristics, explore the Coffeescript programming language.

In this article, you will create an example Coffeescript application. Both client and server-side code will be written entirely using Coffeescript.

Coffeescript Supported Search

The sample application you're about to create allows users to enter a search term and search both on Google and Twitter, and then display the merged results. The client of the application takes the data entered by the user and sends it to the server for results. After the server returns the results, the client creates UI elements for the results and displays them on the screen. For now, there's no need to worry about how the server side works.

First, define the application's data model. The application displays search results, so define a SearchResult class. Listing 1 shows the definition.

Listing 1. Basic SearchResult Class

Class SearchResult constructor: (data)-> @title = Data.title @link = Data.link @extras = data toHtml:-> "<a href=" #{ @link} ' >#{@title}</a> ' Tojson:-> json.stringify @extras

The SearchResult class is very simple. It：

first is a constructor that defines two member variables: Title and link. Look for both values in the data object passed to the constructor. Store the rest of the data in a member variable named extras.

This is a handy approach because your application has two different search results (Google search results and Twitter search results).

defines two methods for the SearchResult class: ToHtml, using Coffeescript string interpolation to create a simple HTML string from the SearchResult instance. Tojson, which is used to convert the SearchResult object to a JSON string.

The class in Listing 1 provides basic search result characteristics. You'll get more data from Google and Twitter's search results. Create subclasses for various types of search results and model for this. Listing 2 shows the type of Google search results.

Listing 2. Googlesearchresult class

class Googlesearchresult extends SearchResult constructor: (data)-> Super Data @content = @extras. Content toHtml:- > "#{super} <div class= ' snippet ' >#{@content}</div>"

Listing 2 shows how simple object-oriented programming in Coffeescript is. Googlesearchresult expands the basic SearchResult class in Listing 1. Its constructor will call the superclass's constructor. If you have the experience of implementing class style inheritance in JavaScript, you can understand how difficult this is. Listing 3 shows the generated JavaScript.