search

Home  >  Q&A  >  body text

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

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

PHP中文网PHP中文网2873 days ago1226

reply all(13)I'll reply

  • 大家讲道理

    大家讲道理2017-04-17 13:06:16

    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:

    1. 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.
    2. 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.
    3. 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.
    4. 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.
    5. 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.
    6. 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.
    7. 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 """<html>
<head><script type="text/javascript" src="onering://onering/onering.js"></script></head>
<body>
<p>Hello, world!</p>
<button onclick="javascript:ONERING.exit()">Exit</button>
</body></html>"""

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

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 13:06:16

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

    reply
    0
  • 高洛峰

    高洛峰2017-04-17 13:06:16

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

    reply
    0
  • 阿神

    阿神2017-04-17 13:06:16

    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

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 13:06:16

    To be honest, I always use abode air

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:06:16

    You can also use mozilla xul runner

    reply
    0
  • 怪我咯

    怪我咯2017-04-17 13:06:16

    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

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 13:06:16

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

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 13:06:16

    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/

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 13:06:16

    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

    reply
    0
  • Cancelreply