{"id":13399406,"url":"https://github.com/flightjs/flight","last_synced_at":"2025-05-13T19:03:00.787Z","repository":{"id":6677615,"uuid":"7922549","full_name":"flightjs/flight","owner":"flightjs","description":"A component-based, event-driven JavaScript framework from Twitter","archived":false,"fork":false,"pushed_at":"2022-08-25T12:11:30.000Z","size":652,"stargazers_count":6515,"open_issues_count":8,"forks_count":547,"subscribers_count":405,"default_branch":"master","last_synced_at":"2025-05-05T01:37:23.611Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://flightjs.github.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flightjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-30T19:59:30.000Z","updated_at":"2025-05-01T11:54:40.000Z","dependencies_parsed_at":"2022-08-28T04:00:59.215Z","dependency_job_id":null,"html_url":"https://github.com/flightjs/flight","commit_stats":null,"previous_names":["twitter/flight"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flightjs%2Fflight","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flightjs%2Fflight/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flightjs%2Fflight/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flightjs%2Fflight/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flightjs","download_url":"https://codeload.github.com/flightjs/flight/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253360736,"owners_count":21896375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:00:37.395Z","updated_at":"2025-05-13T19:03:00.748Z","avatar_url":"https://github.com/flightjs.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Please note\n\nFlight is **not under active development**. New pull requests will not be accepted unless they fix core bugs or security issues.\n\n---\n\n# Flight\n\n[![Build Status](https://travis-ci.org/flightjs/flight.png?branch=master)](http://travis-ci.org/flightjs/flight) [![Gitter](https://badges.gitter.im/Join%20chat.svg)](https://gitter.im/flightjs/flight?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n[Flight](http://flightjs.github.io/) is a lightweight, component-based,\nevent-driven JavaScript framework that maps behavior to DOM nodes. It was\ncreated at Twitter, and is used by the [twitter.com](https://twitter.com/) and\n[TweetDeck](https://tweetdeck.twitter.com/) web applications.\n\n* [Website](http://flightjs.github.io/)\n* [API documentation](doc/README.md)\n* [Flight example app](http://flightjs.github.io/example-app/) ([Source](https://github.com/flightjs/example-app))\n* [Flight's Google Group](https://groups.google.com/forum/?fromgroups#!forum/twitter-flight)\n* [Flight on Twitter](https://twitter.com/flightjs)\n* [Flight on Freenode IRC](http://webchat.freenode.net/?channels=flightjs) (#flightjs)\n\n## Example\n\nA simple example of a Flight component.\n\n```js\n/* Component definition */\n\nvar Inbox = flight.component(inbox);\n\nfunction inbox() {\n  this.doSomething = function() { /* ... */ }\n  this.doSomethingElse = function() { /* ... */ }\n\n  // after initializing the component\n  this.after('initialize', function() {\n    this.on('click', this.doSomething);\n    this.on('mouseover', this.doSomethingElse);\n  });\n}\n\n/* Attach the component to a DOM node */\n\nInbox.attachTo('#inbox');\n```\n\n## Installation\n\nQuick start using the [pre-built\nlibrary](http://flightjs.github.io/release/latest/flight.min.js) (a\n[UMD](https://github.com/umdjs/umd) bundle). It exposes all of its modules as\nproperties of a global variable, `flight`.\n\n```html\n\u003c!-- jQuery --\u003e\n\u003cscript src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"\u003e\u003c/script\u003e\n\u003c!-- Flight release --\u003e\n\u003cscript src=\"http://flightjs.github.io/release/latest/flight.min.js\"\u003e\u003c/script\u003e\n```\n\nUsing [npm](https://www.npmjs.org/):\n\n```\nnpm install --save flightjs\n```\n\nUsing [Bower](http://bower.io/):\n\n```\nbower install --save flight\n```\n\nYou will have to load [jQuery](http://jquery.com) in your application.\n\n## Why Flight?\n\nFlight is only ~5K minified and gzipped. It's built upon jQuery.\n\nFlight components are highly portable and easily testable. This is because a\nFlight component (and its API) is entirely decoupled from other components.\nFlight components communicate only by triggering and subscribing to events.\n\nFlight also includes a simple and safe\n[mixin](https://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/)\ninfrastructure, allowing components to be easily extended with minimal\nboilerplate.\n\n## Development tools\n\nFlight has supporting projects that provide everything you need to setup,\nwrite, and test your application.\n\n* [Flight generator](https://github.com/flightjs/generator-flight/)\n  Recommended. One-step to setup a Flight-based web app.\n\n* [Flight package generator](https://github.com/flightjs/generator-flight-package/)\n  Recommended. One-step to setup everything you need to write and test a\n  standalone Flight component.\n\n* [Jasmine Flight](https://github.com/flightjs/jasmine-flight/)\n  Extensions for the Jasmine test framework.\n\n* [Mocha Flight](https://github.com/flightjs/mocha-flight/)\n  Extensions for the Mocha test framework.\n\n## Finding and writing components\n\nYou can browse all the [Flight components](http://flight-components.jit.su)\navailable at this time. They can also be found by searching the Bower registry:\n\n```\nbower search flight\n```\n\nThe easiest way to write a new Flight component is to use the [Flight\npackage generator](https://github.com/flightjs/generator-flight-package/):\n\n```\nyo flight-package foo\n```\n\n## Browser Support\n\nChrome, Firefox, Safari, Opera, IE 7+ (requires [ES5-shim](https://github.com/kriskowal/es5-shim)).\n\n## Quick Overview\n\nHere's a brief introduction to Flight's key concepts and syntax. Read the [API\ndocumentation](doc) for a comprehensive overview.\n\n### Components ([API](doc/component_api.md))\n\n- A Component is nothing more than a constructor with properties mixed into its prototype.\n- Every Component comes with a set of basic functionality such as event handling and component registration.\n(see [Base API](doc/base_api.md))\n- Additionally, each Component definition mixes in a set of custom properties which describe its behavior.\n- When a component is attached to a DOM node, a new instance of that component is created. Each component\ninstance references the DOM node via its `node` property.\n- Component instances cannot be referenced directly; they communicate with other components via events.\n\n### Interacting with the DOM\n\nOnce attached, component instances have direct access to their node object via the `node` property. (There's\nalso a jQuery version of the node available via the `$node` property.)\n\n### Events in Flight\n\nEvents are how Flight components interact. The Component prototype supplies methods for triggering events as\nwell as for subscribing to and unsubscribing from events. These Component event methods are actually just convenient\nwrappers around regular event methods on DOM nodes.\n\n### Mixins ([API](doc/mixin_api.md))\n\n- In Flight, a mixin is a function which assigns properties to a target object (represented by the `this`\nkeyword).\n- A typical mixin defines a set of functionality that will be useful to more than one component.\n- One mixin can be applied to any number of [Component](#components) definitions.\n- One Component definition can have any number of mixins applied to it.\n- Each Component defines a [*core*](#core_mixin) mixin within its own module.\n- A mixin can itself have mixins applied to it.\n\n### Advice ([API](doc/advice_api.md))\n\nIn Flight, advice is a mixin (`'lib/advice.js'`) that defines `before`, `after` and `around` methods.\n\nThese can be used to modify existing functions by adding custom code. All Components have advice mixed in to\ntheir prototype so that mixins can augment existing functions without requiring knowledge\nof the original implementation. Moreover, since Components are seeded with an empty `initialize` method,\nComponent definitions will typically use `after` to define custom `initialize` behavior.\n\n### Debugging ([API](doc/debug_api.md))\n\nFlight ships with a debug module which can help you trace the sequence of event triggering and binding. By default\nconsole logging is turned off, but you can log `trigger`, `on` and `off` events by means of the following console\ncommands.\n\n## Authors\n\n+ [@angus-c](http://github.com/angus-c)\n+ [@danwrong](http://github.com/danwrong)\n+ [@kpk](http://github.com/kennethkufluk)\n\nThanks for assistance and contributions:\n[@sayrer](https://github.com/sayrer),\n[@shinypb](https://github.com/shinypb),\n[@kloots](https://github.com/kloots),\n[@marcelduran](https://github.com/marcelduran),\n[@tbrd](https://github.com/tbrd),\n[@necolas](https://github.com/necolas),\n[@fat](https://github.com/fat),\n[@mkuklis](https://github.com/mkuklis),\n[@jrburke](https://github.com/jrburke),\n[@garann](https://github.com/garann),\n[@WebReflection](https://github.com/WebReflection),\n[@coldhead](https://github.com/coldhead),\n[@paulirish](https://github.com/paulirish),\n[@nimbupani](https://github.com/nimbupani),\n[@mootcycle](https://github.com/mootcycle).\n\nSpecial thanks to the rest of the Twitter web team for their abundant\ncontributions and feedback.\n\n## License\n\nCopyright 2013 Twitter, Inc and other contributors.\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflightjs%2Fflight","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflightjs%2Fflight","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflightjs%2Fflight/lists"}