So, what is KineticJS?

Exclusive offer: get 50% off this eBook here
Instant KineticJS Starter [Instant]

Instant KineticJS Starter [Instant] — Save 50%

Create Flash-like mobile supported applications using KineticJS! with this book and ebook

$12.99    $6.50
by Andrey Kovalenko | June 2013 | Open Source

In this article by Andrey Kovalenko, the author of the book, Instant KineticJS Starter, we will learn about the basics of KineticJS.

In order to understand what KineticJS is, you must be familiar with JavaScript development and should know the basics of HTML5 Canvas programming. KineticJS is a JavaScript library that helps us simplify the development of interactive HTML5 applications. In this case interactive applications are different 2D applications such as games, image editors, interactive maps, cartoons, and more (just turn on your imagination). From a technical point of view it is an extension to the HTML5 Canvas 2D context in the form of a JavaScript library. In addition, your application will work on all browsers that support HTML5, and even on mobile devices.

(For more resources related to this topic, see here.)

With KineticJS you can draw shapes on the stage and manipulate them using the following elements:

  • Move

  • Rotate

  • Animate

Even if your application has thousands of figures, the animation will run smoothly and with a high enough FPS. The items are organized into layers, of which you can have as many as you want. Shapes can also be organized into groups. KineticJS allows unlimited nesting of shapes and groups. Scenes, layers, groups, and figures are virtual nodes, similar to DOM nodes in HTML. Any node can be styled or transformed. There are several predefined shapes, such as rectangles, circles, images, text, lines, polygons, stars, and so on. You can also create custom drawing functions in order to create custom shapes. For each object you can assign different event handlers (touch or mouse). You can also apply filter or animation to the shapes.

Of course, you can implement all the necessary HTML5 Canvas functionality without KineticJS, but you have to spend a lot more time, and not necessarily get the same level of performance. The creators of KineticJS put all their love and faith into a brighter future of HTML5 interactivity. The main advantage of the library is high performance, which is achieved by creating two canvas renderers – a scene renderer and a hit graph renderer. One renderer is what you see, and the second is a special hidden canvas that's used for high-performance event detection. A huge advantage of KineticJS is that it is an extension to HTML5 Canvas, and thus is perfectly suited for developing applications for mobile platforms. High performance can hide all the flaws of the canvas in iOS, Android, and other platforms. It is a known fact that the iOS platform does not support Adobe Flash. In this case, KineticJS is a good Flash alternative for iOS devices. You can wrap up your KineticJS application with Cordova/PhoneGap and use it as an offline application, or publish to the App store.

In short, the following are the main advantages of KineticJS:

  • Speed

  • Scalability

  • Extensibility

  • Flexibility

  • Familiarity with API (for developers with the knowledge of HTML, CSS, JS, and jQuery)

If you are an active innovator and indomitable web developer, this library is for you.

Summary

In this article, we walked through the basics and main advantages KineticJS.

Resources for Article :


Further resources on this subject:


Instant KineticJS Starter [Instant] Create Flash-like mobile supported applications using KineticJS! with this book and ebook
Published: March 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Andrey Kovalenko

Andrey Kovalenko is a software developer, team leader, and blogger. He is a member of eGo Creative Media Solutions, a web and mobile development firm in Ukraine. He has been working there right from the beginning of the company and holds the position of CTO. His work there includes overseeing and implementing projects in a wide variety of technologies, with an emphasis on .NET, MSSQL, JavaScript, HTML5, and Cordova (PhoneGap). He leads several development groups that produce products for call centers, marketing companies, real-estate agencies, telecommunication companies, healthcare, and many others. Since last few days he is focusing on learning mobile development in detail. He is a believer in the future of JavaScript as a generic development language.

When Andrey isn't coding, he likes to hang out with his family, skydive, and exercise at the local cross-fit gym. He is a healthcare enthusiast. And he is trying to put all his software development efforts towards making life healthier.

It is his first book and he has tried hard to make it really good.

Books From Packt


Building Impressive Presentations with impress.js
Building Impressive Presentations with impress.js

Instant Dependency Management with RequireJS How-to [Instant]
Instant Dependency Management with RequireJS How-to [Instant]

Instant Node.js Starter [Instant]
Instant Node.js Starter [Instant]

Learning Ext JS 4
Learning Ext JS 4

Learning Ext JS 3.2
Learning Ext JS 3.2

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

HTML5 Boilerplate Web Development
HTML5 Boilerplate Web Development


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
Resources
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