Skip to content

GeertjanWielenga/vuejet

Repository files navigation

Full Replacement of Knockout with Vue in Oracle JET

Experimental Demo App illustrating inclusion of the following in an Oracle JET app, with the exclusion of Knockout:

Purpose

Investigate whether and to what extent Knockout can be replaced with Vue in Oracle JET applications. This is not the direction that the Oracle JET team is going in, but is my experimental proof of concept below.

Set Up

After cloning the repo, take the following steps in the order below.

npm install: the dependencies set in the package.json file are downloaded.

grunt build: the web staging folder is created and the custom libraries defined in the oraclejet-build.js file are automatically moved to web/js/libs. The custom libraries are the Vue libraries, together with Enquire, listed above.

grunt serve: the application in the web staging folder opens in the browser, while the watch list defined in the oraclejet-serve.js file is used to ensure that changes are automatically reloaded.

Tasks

1. Register Vue via Require in an Oracle JET application.

Status: yes See the package.json and main.js files.

2. Rewrite Oracle JET modules to use Vue instead of Knockout.

Status: yes See the views folder and the viewModels folder.

3. Create and load Vue components in Oracle JET modules.

Status: yes See the vue-components folder, containing Vue components, loaded via require-vuejs, as shown in Layout2.vue.

4. Split combined constructs into HTML/JS files.

Status: In progress. Done for Vue-based Oracle JET modules, not yet for Vue components. Also, investigate creating a Vue plugin that will automatically load the two together, removing the requirement to load the HTML file into the JavaScript, as is done by ojModule in standard Oracle JET applications. See the dashboard.html and dashboard.js files.

5. Wrap Oracle JET components in Vue components.

Status: In progress. Each Oracle JET component is a jQuery UI component that needs to be wrapped as a Vue component, so that custom tags provided by Vue can be used to load Oracle JET components. See the ojvdatepicker.vue and the ojvchart.vue files.

6. Replace Oracle JET router with vue-router.

Status: yes See the package.json, main.js, and Header2.vue files.

7. Provide new solution for handling responsive design.

Status: yes Knockout-based utility classes for responsive design are replaced by Enquire.js. See the Header1.vue file.

8. Rewrite 'navdrawer' Oracle JET template to use Vue components.

Status: yes See the index.html and the Layout2.vue files.

9. Include Vue libraries in build and serve Grunt tasks.

Status: yes See the oraclejet-build.js and oraclejet-serve.js files.

10. Remove Knockout from the application.

Status: yes No more references to Knockout anywhere.

11. Integrate vue-resource and Axios for HTTP/REST/AJAX calls.

Status: yes After integrating vue-resource successfully, it was removed because it has been retired and replaced with axios and vue-axios. See the about.html and about.js files, which integrates usage of axios, defined in SourceSelection.vue.

12. Investigate whether/how CCA components can be integrated.

Status: In progress. Maybe Vue components are enough, though it would be useful to be able to create CCA components that use Vue instead of Knockout and figure out how to reuse them in CCA-supporting products.

13. Investigate usage of Webpack instead of Require.

Status: Not started. Maybe fork this project and then work on migrating from Require to Webpack via the fork.

Screenshots

pic1 pic2 pic3 pic4 pic5

References and Further Information

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published