html5 - html css js等web前端技术可以用来写windows下客户端程序？

Question

http://www.wandoujia.com/join#job-1 在这个豌豆荚招聘前端工程师的页面中，说豌豆荚win版本是基于webkit开发的客户端软件，职位要求里说用web前端技术开发windows客户端，我是前端小白，只知道这些技术可以用来...

大家讲道理 · Answer

Thanks for the invitation. I don’t know much about this, but I still want to say something. . Please point out any errors or omissions.

Douban had an open source project called One Ring a long time ago. Although it has not been updated for a long time (I don’t know if it has been abandoned), it can be used as a typical learning reference example.

OneRing is a cross-platform desktop application development library that uses HTML5+CSS3 to create user interfaces, Javascript to write interactive logic, and it also provides web backend technology to write background logic.

OneRing consists of two parts: framework and application. The framework part provides the desktop display of each operating system by embedding a WebKit browser into the local window. And provides a consistent js interface. The application part is a Web Server is responsible for application logic, uses HTML/CSS to describe the interface, and uses JS to provide user interaction.

According to hongqn’s cousin’s explanation, OneRing was made to use Web technology to develop desktop applications (it feels very cool). Let’s take a look at the birth iteration of OneRing.

1. Our common Web technologies are as follows:

2. Join App Launcher, listen to the local port, and open the system default browser when running the program:

3. There is a problem with the above implementation. The application still runs in the browser and does not feel like a local experience. Therefore, the browser cannot be used for local display. Encapsulate the browser and use IE's form:

4.IE must DIE! So, use webkit instead of ie to make the local interface:

5. But what should I do if I want to access the system API? Using onering.js:

6. The server avoids firewall annoying:

OneRing application startup process:

The application starts, loads the framework runtime library, registers the access method of the application URL (such as WSGI), and calls the framework's loop function.
The loop function will access the /init URL of the application and obtain a json data describing the relevant parameters of the initial application window, such as position, size, window attributes, initial page URL, etc.
The framework creates a window based on this data, and lets the browser in the window access the initial page URL, render the user interface, and then wait for UI events.
When users operate on the interface, they can change the entire window content through hyperlinks, or use Ajax technology to update part of the window content.
The application allows the browser to call js functions under the ONERING namespace to interact with the operating system. The namespace is loaded by url onering://onering/onering.js.
The application listens to operating system UI events such as window change size and movement through the bind(event, function) function. You can use the pub/sub mechanism to actively push messages to the browser.
Call ONERING.exit() to exit the application; the application will also exit after all windows are closed.

The explanation is very weak, look at a Python sample code:

#!/usr/bin/env python
import json
import web
import onering

urls = (
    '/init', 'init',
    '/', 'index',
)

class init:
    def GET(self):
        web.header('Content-Type', 'application/json')
        return json.dumps({'width': 400, 'height': 300, 'url': '/'})

class index:
    def GET(self):
        web.header('Content-Type', 'text/html')
        return """


Hello, world!

"""

app = web.application(urls, globals())

if __name__ == '__main__':
    onering.register_wsgi_app("demo", app.wsgifunc())
    onering.loop("demo")

Wandoujia 2.0 referred to the design ideas of OneRing and rewrote OneRing (Wandoujia has always said that it is open source but it has not been open source -_-).

Wandoujia 2.0 technical architecture diagram:

Referring to OneRing’s communication layer, the communication layer is divided into three parts, one is the front-end, one is the back-end service, and the other is the operating system. The communication implementation strategy for these three ends and six directions is defined:

Several OneRing related links:

OneRing project address
A slide from hongqn in 2010
An article by OSChina
Tide SDK
hongqn’s speech at Wandoujia (a few minutes ago I talked about OneRing and Wandoujia’s gay relationship)
Technical Pitfalls of Wandoujia 2.0

PHP中文网 · Answer

Tencent’s browser, housekeeper, QQ Music, etc. are all based on Web technologies such as HTML

高洛峰 · Answer

Windows8 APP supports front-end technology and has API. Of course, it still supports C++/C#

阿神 · Answer

If you have PhoneGap on your mobile phone, you can use HTML + CSS + Javascript to write Apps. (In fact, the system's WebView is used in the App, and then the HTML you wrote is loaded.)

There is TideSDK on your computer, and the purpose is the same. (It comes with WebKit.)

Wunderlist is developed using TideSDK. For other details, please see:
https://github.com/TideSDK/TideSDK/wiki/Applications-Using-TideSDK

PHP中文网 · Answer

To be honest, I always use abode air

天蓬老师 · Answer

You can also use mozilla xul runner

怪我咯 · Answer

This question has been asked on v2ex, http://www.v2ex.com/t/46619, you can refer to it.

Mainly consists of the following frameworks:

appjs
OneRing by Douban
Gecko by Mozilla
qooxdoo

PHP中文网 · Answer

The program is just like a browser, embedding a specified page. Isn’t this a very simple truth?

PHP中文网 · Answer

Tencent Web front-end team – TAT (Tencent Alloy Team) has also developed an engine for developing desktop apps using the web, called webtop

http://www.alloyteam.com/2012/07/webtop-engine/

PHP中文网 · Answer

Google has a project called packaged app. Programs developed using web development technology can run on PCs and mobile clients. Of course, they can also run on browsers. This is the preparation for chrome os

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial