Getting Started with Twitter Flight

Getting Started with Twitter Flight
eBook: $17.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $47.98    Print cover: $29.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Learn how to build scalable, maintainable, modular applications with Flight, Twitter’s cutting-edge JavaScript framework
  • Work through building a simple application from scratch with clear, step-by-step examples
  • Leap ahead of the learning-curve with best practice examples from an experienced Flight developer

Book Details

Language : English
Paperback : 130 pages [ 235mm x 191mm ]
Release Date : October 2013
ISBN : 1783280956
ISBN 13 : 9781783280957
Author(s) : Tom Hamshere
Topics and Technologies : All Books, Web Development, Java, jQuery, Open Source

Table of Contents

Chapter 1: What is Flight?
Chapter 2: The Advantages of Flight
Chapter 3: Flight in the Wild
Chapter 4: Building a Flight Application
Chapter 5: Components
Chapter 6: UI Components
Chapter 7: Data Components
Chapter 8: Event Naming
Chapter 9: Mixins
Chapter 10: Templating and Event Delegation
Chapter 11: Web Application Performance
Chapter 12: Testing
Chapter 13: Complexities of Flight Architecture
Appendix: Flight API Reference
  • Chapter 1: What is Flight?
    • Who made Flight?
    • How does Flight work?
      • Event-driven interfaces
      • Scalable architecture
        • No parent-child relationships
        • No spaghetti code
        • Promoting reusability with well-defined interfaces
      • The missing model
        • Simplification
        • Reducing boilerplate
    • Summary
      • Chapter 3: Flight in the Wild
        • Flight at Twitter
          • Better performance
          • A manageable codebase
        • Quotes from developers
          • On refactoring
          • On Flight's component architecture
        • Open source Flight projects
          • TodoMVC
          • Components for web applications
        • Extending Flight with two-way data binding
        • Summary
        • Chapter 4: Building a Flight Application
          • Scaffolding a Flight application with Yo
            • Installing Yo
            • Understanding the application structure
            • Running the application
          • Creating custom applications
          • Using Flight without a module loader
          • Troubleshooting
          • Debugging
          • Summary
          • Chapter 5: Components
            • What is a component?
            • Component types
              • Mixins
            • Creating your first component
              • Attaching components to the DOM
              • Performing actions on component initialization
            • Summary
            • Chapter 6: UI Components
              • Attaching components to existing HTML
              • Listening for browser events
                • Attaching event handlers
                • Defining event handlers
              • Finding DOM nodes
                • Setting default attributes
                • Using attributes to select nodes
                • Triggering custom events in Flight
                • Triggering events on specific elements
                • Event names
                • Event data
              • Modifying the DOM
              • Summary
              • Chapter 7: Data Components
                • What is a data component?
                • Attaching data components
                • Naming data events
                • Creating a data component
                • Listening for UI events
                • Event handlers
                • Triggering data events
                • Completing the task_data component
                  • handleNeedsTask
                  • handleNeedsTasks
                  • handleTaskCompleted
                • Error handling
                • Handling data events
                • Summary
                • Chapter 8: Event Naming
                  • The importance of event names
                  • Events are not instructions
                  • Suggested naming conventions
                  • Summary
                  • Chapter 9: Mixins
                    • What are mixins?
                    • When to use mixins
                    • How do mixins work?
                    • Creating mixins
                    • Using mixins
                    • Mixin priority
                    • Creating your first mixin
                      • Mixing storage into taskData
                    • Initializing the task list from storage
                    • Extending existing methods
                      • before and after
                      • around
                    • Advice priority for components and mixins
                    • Mixing mixins into mixins
                    • Summary
                    • Chapter 10: Templating and Event Delegation
                      • Generating template objects from DOM nodes
                      • Constructing templates in components
                      • Creating a templating mixin
                      • Server-side compilation
                      • Using HTML to determine state
                      • Working with dynamic HTML – event delegation
                      • Adding delegated events to task_list
                        • Completing a task
                      • Summary
                      • Chapter 11: Web Application Performance
                        • Reducing time to page load
                          • Deferred loading
                        • Server-side rendering
                        • Using the DOM to determine state
                        • Using request type to determine response
                        • Perceived performance
                          • Applying perceived performance in Flight
                        • Summary
                        • Chapter 12: Testing
                          • What does a test look like?
                          • Testing the interface
                          • Obtaining a reference to a component instance
                          • Instantiating standalone mixins
                          • Triggering browser events
                          • Allowing for refactoring
                          • Testing teardown
                          • Testing component instantiation
                          • Extending Jasmine for Flight
                            • Jasmine and AMD
                            • Event assertions
                            • Testing whether methods have been called
                          • Summary
                            • Appendix: Flight API Reference
                              • Components
                                • Component definition
                                • Mixin definition
                                • Using mixins
                                • Instantiating components
                                • Methods available on a component instance
                                  • Advice
                                  • defaultAttrs
                                  • select
                                  • Events
                                  • teardown
                              • Using Flight's registry
                                • findInstanceInfoByNode
                                • findInstanceInfo
                                • allInstances

                              Tom Hamshere

                              Tom Hamshere is based in North London and has been a frontend developer since 1998, working on a wide variety of projects. He has been a part of the Twitter UK flock since May 2012, focusing primarily on TweetDeck, an awesome JavaScript Twitter client. He was the first developer to implement Flight outside of, and is responsible for a number of Flight-related open source projects, including jasmine-flight and flight-keyboard-shortcuts. When not hacking away at the codeface, Tom enjoys gardening, cooking, skiing, and traveling.
                              Sorry, we don't have any reviews for this title yet.

                              Submit Errata

                              Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


                              - 5 submitted: last submission 25 Apr 2014

                              Errata type: Code | Page number: 74

                              var action = $([data-action]).data('action');

                              Should be:
                              var action = $('[data-action]').data('action');


                              Errata type: Code | Page number: 60

                              localStorage.set(key, value);
                              should be
                              localStorage.set(key, serializedValue);

                              The methods on localStorage for Chrome and Firefox are setItem and getItem,  instead of the get and set that the book says.

                              Errata type: Code | Page number: 68

                              this.$taskItemTemplate ='taskItemSelector').clone();

                              Should be:

                              this.$taskItemTemplate ='taskItemSelector').clone().removeClass('hide');





                              Errata Type: Technical | Page number: 62

                              The uiNeedsTasks event should be fired on initialization of the task list component.

                              Errata Type: Code | Page Number: 52

                              this.on('dataTaskAdded', this.handleTaskAdded);

                              Should be:

                              this.on(document, 'dataTaskAdded', this.handleTaskAdded);

                              Errata Type: Code | Page Number: 52

                              the task_list.js file sample has this line twice:
                              return defineComponent(taskList

                              The second occurence should be deleted.

                              Errata Type: Code | Page Number: 51/52

                              var TaskList = require('components/task_list');

                              should be :

                              var TaskList = require('ui/task_list');


                              Errata Type: Code | Page number: 31

                              var HelloWorld = require('component/hello_world);

                              Should be:

                              var HelloWorld = require('component/hello_world');

                              Errata Type: Code | Page number: 61

                     = _.uniqueId('task');

                              Should be:


                              Errata Type: Code | Page number: 46

                              The first line of task_data.js:

                              define(function () {

                              should be:

                              define(function (require) {


                              Errata Type: Code | Page number: 32

                              The code snippet should be as follows:

                              define(function (require) {
                                // import dependencies
                                var defineComponent = require('flight/lib/component');

                                // export component constructor
                                return defineComponent(helloWorld);
                                // component definition
                                function helloWorld () {
                                  // execute some code after initialization
                                  this.after('initialize', function () {
                                    console.log('Hello, world!');


                              Errata Type: Code | Page number: 62

                              The reference to this.handleTaskCreated is incorrect

                              instead it should be:



                              Errata Type: Code | Page number: 52


                              this.$'background-color', this.attr.backgroundColor);

                              should be:

                              this.$node.css('background-color', this.attr.backgroundColor);



                              Sample chapters

                              You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

                              Frequently bought together

                              Getting Started with Twitter Flight +    Silverlight 4 User Interface Cookbook =
                              50% Off
                              the second eBook
                              Price for both: €28.90

                              Buy both these recommended eBooks together and get 50% off the cheapest eBook.

                              What you will learn from this book

                              • Architect reliable, scalable, component-based applications with Flight
                              • Design and build data components for storage and processing
                              • Create UI components to handle browser events and modify the DOM
                              • Use client-side templating and event delegation to create HTML on the fly
                              • Test Flight components by building extensions for the Jasmine test framework

                              In Detail

                              Flight is a lightweight, component-based JavaScript application framework developed by Twitter for It is an exciting alternative to the complexities of modern MVVM frameworks, offering a minimal API that allows you to write fast, reliable, scalable applications with a minimum of boilerplate code.

                              Getting Started with Twitter Flight offers the reader insight into why Flight was created and how to use it to build performant, powerful web apps from a unique perspective – that of someone who has had the opportunity to work directly with the team that created it. From a basic knowledge of JavaScript and jQuery, you will explore every aspect of Flight through practical examples and detailed explanations.

                              Learn what separates Flight from other frameworks, why Flight was created, and why you should use it in your next project. Discover the power of Flight’s component-based architecture and use mixins, an exciting alternative to class-based inheritance, to create templating systems and data storage layers.

                              Getting Started with Twitter Flight provides all you need to know to build everything from UI widgets to large-scale, data-driven applications.


                              Getting Started with Twitter Flight is written with the intention to educate the readers, helping them learn how to build modular powerful applications with Flight, Twitter’s cutting-edge JavaScript framework.

                              Who this book is for

                              This book is for anyone with a foundation in JavaScript who wants to build web applications. Flight is quick and easy to learn, built on technologies you already understand such as the DOM, events, and jQuery.

                              Code Download and Errata
                              Packt Anytime, Anywhere
                              Register Books
                              Print Upgrades
                              eBook Downloads
                              Video Support
                              Contact Us
                              Awards Voting Nominations Previous Winners
                              Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
                              Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software