Open-source HTML5 APP development artifact CanTK released, html5cantk

Open-source HTML5 APP development artifact CanTK released, html5cantk

CanTK is a GUI system based on HTML5 Canvas. It provides a complete control library, event distribution system, window management system, and adaptation between different platforms. CanTK was born to solve two basic problems in HTML5 App development:

1. Develop apps with real Native experience.

HTML is a document. Its strengths are to present content rather than interact with users. Therefore, no matter how hard it is, it is difficult to develop applications comparable to Native. Even from the current best HTML5 Mobile Framework (such as Sencha touch and KendoUI) developed apps: Compared with Web pages, they are indeed like apps, but compared with Real Apps, they are more like web pages. This is the most embarrassing part of HTML5 apps.

The following are the main reasons why HTML cannot be used for APP development:

• The HTML gene is a document. Minor changes in the document content will lead to interface re-arrangement, and user operation process feedback is the most basic requirement of modern apps. These feedback all lead to the need for constantly re-arrangement of interfaces, the html app has a reputation for poor performance because it consumes a lot of CPU time.

• HTML itself does not have a window management mechanism. It usually simulates different windows by loading different pages. As page loading takes time, wait animation is usually enabled during HTML5 APP interface switching, which greatly affects the user experience.

• The limitations of HTML controls make it very difficult to simulate Native effects. HTML only provides the most basic controls, although some controls can be simulated through CSS, however, it is far from the native GUI library.

• HTML5 is also very difficult to develop apps. Isn't HTML very simple for many layers? HTML is very simple! However, it is difficult to use it to develop apps. Otherwise, the libraries of Sencha touch cannot be sold so expensive.

Some of the above reasons can be solved through tools or libraries, and some of them cannot be solved at all. The emergence of HTML5 has indeed brought a new turn to the html app, because the HTML5 Canvas Element has brought great flexibility to developers, but most vendors are focusing on CSS, so after a few years, the HTML5 APP will still survive.

CanTK is a complete GUI system implemented on the HTML5 Canvas Element by completely abandoning CSS and HTML controls. Although CanTK is not the first control on the Canvas, CanTK is currently the only complete GUI system.

1. Provides UI support for HTML5 game engines.

Any game player knows that a game scenario is only a part of the game. A slightly more complex game has other interfaces, such as settings, equipment, and stores. Observe these interfaces carefully and we will find that they are not very different from the interfaces of common apps except the skin. HTML5 game engines are implemented based on HTML5 Canvas. Their advantage is to explore the potential of hardware graphics rendering (speed), while almost all GUI controls are weak. HTML controls are not expressive, and it is difficult to seamlessly integrate with HTML5 Canvas, which forces HTML5 game developers to spend a lot of time playing the game interface.

CanTK frees HTML5 game developers from working on the UI, allowing them to focus on the development of the game itself. CanTK is adapted to the currently popular HTML5 game engine, including cocos2d-html5, egret, pixi. js, panda. js and phaser. js, and will also increase support for other game engines in the future. The following HTML5 game engine's comments on CanTK:

Game Engine cocos2d-html5 author Lin shun evaluation:

The basic coverage of common app functions, online demo is very careful. If the chart-related controls can be bound with numeric values, it is the artifact for app development.

Evaluation by game engine egret developers:

Looks awesome !!

Evaluation by developers of the Game Engine pixi. js:

This is great! Lovely job @ xianjimli!

Comments from Game Engine phaser. js developers:

Very nice :) The UI builder tool loads really slow for me, but it looks great.

Rating of Game Engine panda. js developers:

Amazing! : D

Features of CanTK:

• Open source code is free for companies and individuals (Under LGPL 2.0 ).

• The complete GUI system meets the needs of APP development.

• Develop Native-Like applications.

• Better performance and experience than traditional HTML5 apps.

• Seamlessly integrated into various HTML5 game engines.

• Super scalability, can implement any control you want.

• Provides visual development tools to develop HTML5 apps and games online.

• Automatically adapt to screens with different resolutions and density based on the Layout parameter.

• Replace HTML and CSS with JSON. Put all interface data into a compressed JSON file and load all interfaces at a time (with little data and 30 windows smaller than 40 KB). The interface switching is completed instantly.

• Supports various Mobile platforms. Tested platforms include iOS, android, windows phone, firefox, blackberry, and tizen.

Online demo

Basic controls: http://gamebuilder.duapp.com/apprun.php? Appid = 1, 511409555747143

Link: https://jsgames.sinaapp.com/animal-link/

Puzzle game: https://jsgames.sinaapp.com/puzzle-1/

Calculator: http://dapp8.sinaapp.com/calculator/

Stopwatch: http://dapp8.sinaapp.com/stopwatch/

• Project Link

Source code download: https://github.com/drawapp8/cantk (if you find useful, please add star, thank you :))

APP development tools: http://www.drawapp8.com/appedit.php

Game Development Tool: http://gamebuilder.duapp.com/

• Screen

Html5 app development

1. Because HTML5 cannot be popularized in PC within a short period of time, it is mainly intended to use high-end mobile devices of high-end browsers, so it can be used as an App for Android system development.

2. However, only Android2.2 and later versions support HTML5. The two platforms are expected to support HTML5 in a full range.

3. HTML5 can be used for Offline Application Development. An Offline Application caches required resources locally and does not need to be connected to the Internet the next time it is viewed.

4. Benefits of using HTML5 offline applications: Provides faster and simpler services, highly reusable codes, and convenient service release

5. HTML5 applications: use of services such as Web mailbox, Web RSS, and Web Map in a non-network environment

6. HTML5 Technology focuses on animation and games, and applications in geographic positioning are emerging. HTML5 is also used to improve user experience.

This is the meeting record I made when I attended an HTML5 technology sharing Salon. I hope I can give you some help. HTML5 is still a relatively new technology. I am also exploring it and have more time to communicate.

Sorry, I'm a newbie and I learned html5. Who can tell me what tools are available for developing apps with html5?

If you are talking about tools or something, you can use the development tool notepad, or dw5.5. The most well-known middleware is phonegap, which can be packaged into apps of different platforms; html5 + JqueryMobile + phonegap is a popular combination nowadays. In addition to jqueryMobile, there are also sencha touch and backbone.