OK, this is an assignment, and I have figure a way, I just wanna if there are better approach or whether we can take advantage of some 3rd party libs.
The requirement is simple:
The layer of the whole project is like this:
- Web Browser--->Emulator--->Application
- Emulator + Application = Web App
There are some constrains for the application.
The application must know NOTHING about the browser, not even that there is one. EVERYTHING the application uses comes from
- the JavaScript language specification
- a third-party library that has nothing to do with browsers
- YOUR PUBLISHED INTERFACE FOR YOUR EMULATOR.1
There are some constrains for the Emulator too.
The emulator knows about the BROWSER (and third-party browser-related libraries like jQuery, jQuery-UI, D3.js, or Processing.js).You're expected to use a single CANVAS element for the application's UI, plus maybe a few buttons. You can't set up the application's UI with a lot of elements &c in advance because the emulator must not know what the application WANTS until the application TELLS it.
Furthermore,
The application is supposed to be insulated from the browser; it should not know that there IS an onclick attribute, and it must not be making a choice between onclick onmouseover ondblclick &c.
The emulator does have to make a choice here, so once again we see that there are two call-back layers.
In effect, the application layer says WHAT is to be done and the emulator layer says HOW the action is recognised.
WHAT I DESIGN:
I will develop a simple app, a search box for the user to search something, then display a list of result, the user can click the item to see the detail page. or the user can add some item to favourite. Later can check them in favourite page.
My approach is simple, focus on several stuff:
- A syntax to represent the UI; The application will pass to the emulator in the run time. The emulator will translate it to HTML.
- Some direct action like retrieve API's feedback or show a notification on the UI, The emulator will provide some service functions like fetchAPI(), saveToStorage(), getStorage(), showNotification(), shakeUI();
- Some indirect action(since the application shouldn't know the UI) like some HTML event, onClick, mouseOver. There is a dispatcher in the emulator, it handles all the events at first place, then assign the event back to the application.
- In the previous context, there exists a reaction object, there are some react keywords, target and parameters. Keywords like "COLOR" is change colour, "buttonA" is target, "red" is the parameters. The application will pass back to the emulator.
What's your opinion? Some thoughts or some 3rd party library I can use?
Aucun commentaire:
Enregistrer un commentaire