Learning Dart

Table of Contents

Learning Dart

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

Spiral approach

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Dart – A Modern Web Programming Language

What is Dart?

Dart is a perfect fit for HTML5

A very short history of web programming

Dart empowers the web client

JavaScript is not the way to go for complex apps

Google, GWT, and Dart

Advantages of Dart

Getting started with Dart

Installing the Dart Editor

Your first Dart program

Getting a view on the Dart tool chain

The Dart execution model

A bird's eye view on Dart

Example 1 – raising rabbits

Extracting a function

A web version

Example 2 – banking

Making a todo list with Dart

Summary

2. Getting to Work with Dart

Variables – to type or not to type

Built-in types and their methods

Conversions

Operators

Some useful String methods

Dates and times

Lists

Maps

Documenting your programs

Changing the execution flow of a program

Using functions in Dart

Return types

Parameters

First class functions

Recognizing and catching errors and exceptions

Debugging exercise

Summary

3. Structuring Code with Classes and Libraries

A touch of class – how to use classes and objects

Visibility – getters and setters

Types of constructors

Named constructors

factory constructors

const constructors

Inheritance

Abstract classes and methods

The interface of a class – implementing interfaces

Polymorphism and the dynamic nature of Dart

Collection types and generics

Typing collections and generics

The collection hierarchy and its functional nature

Structuring your code using libraries

Using a library in an app

Resolving name conflicts

Visibility of objects outside a library

Managing library dependencies with pub

Unit testing in Dart

Project – word frequency

Summary

4. Modeling Web Applications with Model Concepts and Dartlero

A short introduction to Git and GitHub

Creating a repository on GitHub and a local version

Collaborating on a GitHub project

What a model is and why we need it in programming

Model concepts – a graphical design tool for our models

Working with model concepts

Explaining the model

Drawing the model

Exporting the model

What is JSON?

Dartlero – a simple domain model framework

An example of using Dartlero

The categories and links application

Summary

5. Handling the DOM in a New Way

Finding elements and changing their attributes

Finding elements

Changing the attributes of elements

Creating and removing elements

Handling events

Manipulating the style of page elements

Animating a game

Ping Pong using style(s)

How to draw on a canvas – Ping Pong revisited

Spiral 1 – drawing a circle and a rectangle

Spiral 2 – colored circles and rectangles

Spiral 3 – moving a ball

Spiral 4 – reorganizing the code

Spiral 5 – a bouncing ball

Spiral 6 – displaying the racket

Spiral 7 – moving the racket using keys

Spiral 8 – moving the racket using the mouse

Spiral 9 – a real game

Spiral 10 – title and replay

Spiral 11 – the master version

Summary

6. Combining HTML5 Forms with Dart

Spiral 1 – the power of HTML5 forms

Spiral 2 – how to validate data with Dart

Validation in the model

Spiral 3 – how to store data in local storage

Spiral 4 – reading and showing data

Spiral 5 – changing and updating data

Spiral 6 – working with a list of bank accounts

Summary

7. Building Games with HTML5 and Dart

The model for the memory game

Spiral 1 – drawing the board

Spiral 2 – drawing cells

Spiral 3 – coloring the cells

Spiral 4 – implementing the rules

Spiral 5 – game logic (bringing in the time element)

Spiral 6 – some finishing touches

Spiral 7 – using images

Adding audio to a web page

Using an audio library – Collision clones

Adding video to a web page

Summary

8. Developing Business Applications with Polymer Web Components

How web components change web development

Web components with Polymer.dart

Declaring and instantiating a web component

Two-way data binding in Polymer.dart

Creating the polymer_links project

Spiral s01

Spiral s02

Spiral s04

Spiral s05

Spiral s06

Using Polymer for the category links project

Adding local storage

Applying web components to the project tasks app

Add and remove Task propagations

Summary

9. Modeling More Complex Applications with Dartling

The Dartling domain modeling framework

Design of the Travel Impressions model in spirals

Generating Travel Impressions code from the model

Initializing the Travel Impressions model with Data

Testing the Travel Impressions model

Defining and using the MVC pattern

The TodoMVC app

Spiral 0 – generating a class model

Spiral 1 – adding todo tasks

Spiral 2 – showing how many todo tasks left

Spiral 3 – removing a single task and completed tasks

Spiral 4 – editing todos (undo and redo)

Spiral 5 – displaying completed, remaining, or all todos

Spiral 6 – editing a task

Summary

10. MVC Web and UI Frameworks in Dart – An Overview

DQuery

Bootjack

Dart Web Toolkit (DWT)

The dartling_dwt_todo_mvc_spirals project

Dart widgets

Bee

HTML components

Rikulo UI

Rikulo MVC

Hipster-mvc

Puremvc

StageXL

Flash Professional CC – toolkit for Dart

Angular.dart

Summary

11. Local Data and Client-Server Communication

The options for browser storage

Asynchronous calls and Futures

Using IndexedDB with Dart

Spiral s00

Spiral s01

Spiral s02

Spiral s03

Spiral s04

Spiral s05

Using Lawndart

A Dart web server

Using JSON web services

Spiral s07

Summary

12. Data-driven Web Applications with MySQL and MongoDB

Database drivers for Dart

Storing todo data in MySQL

Dartlero tasks – a many-to-many model in MySQL

The JSON storage

MySQL storage

MongoDB – a NoSQL database

Using the mongo_dart driver to store the todo data in MongoDB

Summary

Index

Learning Dart

Learning Dart

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: December 2013

Production Reference: 1191213

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-742-2

www.packtpub.com

Cover Image by Javier Barría C (<[email protected]>)

Credits

Authors

Ivo Balbaert

Dzenan Ridjanovic

Reviewers

Sergey Akopkokhyants

Tom Alexander

Christophe Herreman

Yehor Lvivski

Christopher McGuire

Acquisition Editors

Saleem Ahmed

Rebecca Youe

Lead Technical Editor

Neeshma Ramakrishnan

Technical Editors

Venu Manthena

Amit Singh

Hardik B. Soni

Gaurav Thingalaya

Copy Editors

Roshni Banerjee

Brandt D'Mello

Tanvi Gaitonde

Shambhavi Pai

Lavina Pereira

Adithi Shetty

Laxmi Subramanian

Project Coordinators

Apeksha Chitnis

Wendell Palmer

Proofreader

Clyde Jenkins

Indexer

Monica Ajmera Mehta

Graphics

Ronak Dhruv

Disha Haria

Production Coordinator

Pooja Chiplunkar

Cover Work

Pooja Chiplunkar

About the Authors

Ivo Balbaert is currently a lecturer for (Web) Programming and Databases at CVO Antwerpen (www.cvoantwerpen.be), a community college in Belgium. He received a Ph.D. in Applied Physics from University of Antwerp in 1986. He worked for 20 years in the software industry as a developer and consultant in several companies, and for 10 years as a project manager at the University Hospital of Antwerp. From 2000 onward, he switched to partly teaching and partly developing software (KHM Mechelen, CVO Antwerp). He also wrote an introductory book in Dutch about developing in Ruby and Rails: Programmeren met Ruby en Rails, Van Duuren Media, ISBN: 978-90-5940-365-9, 2009, 420 p. In 2012, he authored a book on the Go programming language: The Way To Go, IUniverse, ISBN: 978-1-4697-6917-2, 600 p.

Dzenan Ridjanovic is a university professor who is planning his early retirement to focus on the development of web applications with Dart, HTML5, web components, and NoSQL databases. For more than 10 years, he was a Director of Research and Development in the Silverrun team (http://www.silverrun.com/), which created several commercial tools for analysis, design, and development of data-driven applications. He was a principal developer of Modelibra (http://www.modelibra.org/) tools and frameworks for model-driven development in Java. Recently, he has been developing the Dartling framework for design and code generation of Dart models. His projects are at GitHub (https://github.com/dzenanr), where he is considered a Dart expert (http://osrc.dfm.io/dzenanr). He writes about his projects at On Dart blog (http://dzenanr.github.io/). His courses are available at On Dart Education (http://ondart.me/). He markets his Dart efforts at On Dart G+ Page (https://plus.google.com/+OndartMe). Dzenan Ridjanovic wrote a book in 2009, under the Creative Commons License, entitled Spiral Development of Dynamic Web Applications: Using Modelibra and Wicket (http://www.modelibra.org/).

I want to thank my spouse Amra for her constant care and support, the Dart team for creating a missing web language, and Ivo Balbaert for his productive writing.

About the Reviewers

Sergey Akopkokhyants is a Java certified technical architect with more than 19 years of experience in designing and developing client and server-side applications. For the last five years, Sergey has been responsible for customizing and producing web-oriented applications for wholesale business management solutions projects for several worldwide mobile communications companies. Sergey is passionate about web designing and development, and believes that an investment in bleeding edge technologies will always give a return to both the individual and the organization. He is also the author and owner of several open source projects on GitHub, including the Dart Web Toolkit (DWT). Sergey likes sharing knowledge and experience with others, and helping them to increase their skills and productivity.

Tom Alexander graduated with a Computer Science degree from Rensselaer Polytechnic Institute. He currently works for TripAdvisor as a software engineer, where he works on the mobile version of the website.

Christophe Herreman is a versatile and passionate software architect with more than 10 years of professional experience. He is also a Certified Scrum Master and has general knowledge of many tools and platforms. For the last few years, Christophe has mainly worked on web-based applications in a variety of domains, such as healthcare, education, traffic control, and electronics. His main tasks have been: architecture and development of the client software using Flex, ActionScript and Adobe AIR, HTML, JavaScript, and client-server integrations with Java, .NET, and PHP; automating the build process with tools such as Maven, Ant, Batch, Jenkins/Hudson; setting up unit, integration and functional tests; reviewing, auditing, and improving existing codebases; coaching and mentoring teams. Christophe is also a regular speaker at conferences and user groups, as well as an active open source contributor. He's the founder of the Spring ActionScript framework and the AS3Commons project and a committer on the Apache Flex project. In the past, he has lectured on software and web development at the University College of West-Flanders, Belgium. Together with his partner, he runs the Belgium-based software consultancy firm Stack & Heap (www.stackandheap.com).

Yehor Lvivski thinks that it's never too late to learn and always tries to know the current trends of the web and predict the future ones. He has always wanted to be a designer, but later found an area where he can combine both his design and engineering skills. For the last six years, Yehor was involved in game development, added a nice interactive UI for a search engine, created his own CSS animations library, and several open source projects. He really likes to create a great visual experience. Yehor now works for SpatialKey, and is involved in changing the future of data analysis. Not only does he like to create things, but he's also an active speaker at different local and global conferences. He believes that knowledge sharing is the key point to evolution.

Christopher McGuire is an application developer currently working in Glasgow, Scotland. He graduated from the University of Strathclyde in 2011 with a B.Sc (Hons) in Computer Science and currently works for an investment bank. Chris has experience in developing Enterprise Standard Server applications, primarily using Java and other object oriented-languages, while also developing web/mobile front-end applications using native Android/iOS and HTML5. From this, he has multiple applications published on the Google Play market. In addition to this, Chris has developed multiple web applications and has a strong interest in new and emerging technologies, which have led him to become part of the Dart community and develop several more applications using this language.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by Packt

Copy and paste, print and bookmark content

On demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

Developing a web application or software in general, is still a challenging task. There is a client/browser side and a server side with databases. There are many different technologies to master in order to feel comfortable with a full client/server stack. There are different frameworks with different objectives. There are also different programming languages that a developer must learn each one more suitable either for the server or the client side.

Learning Dart will help a developer to become more focused by using Dart both for clients and servers. Using the same language will ensure that a developer will lose neither performance nor flexibility. Dart can be used within its virtual machine, or its code may be compiled to JavaScript. In both cases, the performance benchmarks show promising scores (https://www.dartlang.org/performance/). Dart is both an object-oriented and a functional language. With Dart, a mix of both approaches is possible, providing great professional freedom and a programming background flexibility. In addition, Dart provides many libraries and tools (http://pub.dartlang.org/) that allow a developer to focus on the task at hand and not be concerned with all the aspects of software development.

With Polymer.dart (https://www.dartlang.org/polymer-dart/), a new approach towards developing web applications with web components will be discovered, allowing a developer to divide a web page into sections and re-use an already developed and tested web component for each section. In the near future, different catalogs of web components will appear, enabling an engineering approach to software development after waiting for many years. A web component may be composed from other web components. It may pass data to its components. A web component may also inherit its behavior from another web component. It may access an already instantiated web component.

Spiral approach

The spiral approach to software learning and development, which preserves a project history as a series of code snapshots or spirals, is used in this book.

The following three points are important in the spiral approach:

The history of development is preserved

Simple solutions are provided first; later on, these solutions may be replaced by more advanced solutions

Only concepts used in a spiral are explained

All of these three points are important in teaching and learning technologies.

Learning new software concepts and technologies is a challenging task. Learning in spirals, from simple to more advanced concepts but with concrete software applications, helps readers get a reasonable confidence level early on, and motivates them to learn by providing more useful applications. With each new spiral, the project grows and new concepts are introduced. A new spiral is explained with respect to the previous one. The difference between two consecutive spirals is that the next spiral has the new code introduced and the old code modified or deleted. This is named learning by anchoring to what we already understand. With a new spiral, we can come back to what we did previously and improve it. In this way, learning in spirals can touch the same topic several times, but each time with more details in a better version.

What this book covers

Learning Dart has 12 chapters. It begins with basic elements of Dart and it ends with a client/server application that uses MongoDB (http://www.mongodb.org/) for data persistence on the server side.

Chapter 1, Dart – A Modern Web Programming Language, helps you understand what Dart is all about. Dart is presented as a major step forward in the web programming arena.

Chapter 2, Getting to Work with Dart, lets you get a firm grasp on how to program in Dart. The code and data structures in Dart, and its functional principles, are explained by exploring practical examples.

Chapter 3, Structuring Code with Classes and Libraries, lets you understand how to use Dart classes to organize code. Dart libraries are introduced to show how complex software may be packaged.

Chapter 4, Modeling Web Applications with Model Concepts and Dartlero, enables you to design a small model graphically in the Model Concepts tool, which is developed in Dart. A model is then represented in Dart as several classes that inherit some data and operations from classes of the Dartlero model framework, also developed in Dart.

Chapter 5, Handling the DOM in a New Way, helps you to learn how to access HTML elements in Dart. Some elements will even be created in Dart and placed properly in the Document Object Model (DOM) of a web page. Dart will also handle user events, such as a click on a button. Finally, you will be able to create a simple game in Dart.

Chapter 6, Combining HTML Forms with Dart, lets you enter data in a form that will be validated by HTML5 and Dart. Then, the valid data will be saved in the local storage of a browser.

Chapter 7, Building Games with HTML5 and Dart, lets you create, step-by-step, a well-known memory game based on what you have learned already. Each step will be a new spiral represented as a complete project in Dart Editor. The first spiral will draw only a rectangle, while the last spiral will be a game that you may show to your friends.

Chapter 8, Developing Business Applications with Polymer Web Components, helps you to create several web components by using Polymer.dart. Those web components will be used in different sections of a single-page application. Three different projects with web components will be presented in this chapter.

Chapter 9, Modeling More Complex Applications with Dartling, explains how a graphical model can be transformed into a JSON document and then used to generate a complete model in Dart, by using the Dartling domain model framework together with its tools. Dartling follows the Model View Controller (MVC) pattern to separate a model from its views.

Chapter 10, MVC Web and UI Frameworks in Dart – An Overview, introduces you to different frameworks already developed in Dart. Because Dart is a brand new language, those frameworks are at early stages of their useful life.

Chapter 11, Local Data and Client-Server Communication, explains how you can store application data in a local database named IndexedDB, which will then be sent as a JSON document to a Dart server. Asynchronous programming with futures will also be covered in this chapter.

Chapter 12, Data-driven Web Applications with MySQL and MongoDB, explains how you can use database drivers to save (and load) data to (and from) a relational database and a NoSQL database. Data sent from a browser as a JSON document will easily be saved in MongoDB in the same JSON form. Two clients will exchange data with the server so that both of them will be up-to-date.

What you need for this book

In order to benefit from this book, you need to have some basic experience in programming. It is also useful to have some understanding of HTML and CSS. What you really need to bring is your enthusiasm to learn how to become a web developer of the future. All the software used in the book are freely available on the Web:

https://www.dartlang.org/

https://github.com/Ivo-Balbaert/learning_dart

https://github.com/dzenanr

http://www.mysql.com/

http://www.mongodb.org/

One of the authors has already taught three times an introductory course to programming with some material from this book. The book also has its own website at http://www.learningdart.org/. Other educational resources for Dart can be found at http://ondart.me/.

Who this book is for

The book is intended for web application programmers, game developers, and other software engineers. Because of its dual focus (Dart and HTML5), the book can appeal to both web developers who want to learn a modern way of developing web applications, and to developers who seek guidance on how to use HTML5. The audience would include mainstream programmers coming with an object-oriented background (Java, .NET, C++, and so on) as well as web programmers using JavaScript, who seek a more structured and tooled way of developing. Both groups would leverage their existing knowledge and expertise: the first, by offering them a way of developing modern web applications using techniques they already know, and the second, by giving them a more productive and engineered way of developing (business) web applications. The article at the following link describes well what Dart has to offer for the web developers of the future:

http://news.cnet.com/8301-1023_3-57613760-93/mixbook-sees-perfect-storm-for-googles-dart-language-q-a/.

Conventions

In this book, you will find a number of styles of text that distinguish among different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: The calculateRabbits function calculates and returns an integer value; this is indicated by the word int preceding the function name.

A block of code is set as follows:

void main() {

  print(The number of rabbits increases as:\n);

  for (int years = 0; years <= NO_YEARS; years++) {

    rabbitCount = calculateRabbits(years);           

    print(After $years years:\t $rabbitCount animals);

}

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

void main() {

  print(The number of rabbits increases as:\n);

  for (int years = 0; years <= NO_YEARS; years++) {

    rabbitCount =

calculateRabbits(years)

;

    print(After $years years:\t $rabbitCount animals);

}

Any command-line input or output is written as follows:

git clone git://github.com/dzenanr/collision_clones.git

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: You can change this behavior by navigating to Tools | Preferences | Run and Debug, and change the Break on Exceptions to None.