search

Emerjoin / Hi-Framework-features

Java EE Framework
5 stars 1 forks source link

Evolving Hi-Framework to a more powerful and stable level #102

Closed emjunior258 closed 7 years ago

emjunior258 commented 7 years ago

1 - Stop building/redeploying to see UI changes (develop faster)

Template files must be executable, meaning they must run even without a server.

2 - Modularization of framework JavaScript

The framework should be blown into modules in order to allow easy testability and code maintainability.

3 - vue.js Integration

Views representation

Hi-Framework defines views as global Vue components. The only thing special about them is that they are bound to to functional urls like: /create-student and /student/create and mapped to controller's actions.

In Hi-Framework, views are vue single file components](https://vuejs.org/v2/guide/single-file-components.html) or two separated files: action.html and action.js.

Single component

For each view, will exist a controller/actionName.vue file. Vue files are supposed to contain HTML, Javascript and CSS as the following example illustrates:

<template>
        <h1 class="demo">Welcome to Vue Mr {{name}}</h1>
</template>

<script>
      export default {
           data:{ },
          methods: { }
     }
</script>

<style>
      .demo {
           color: red
       }
</style>

Vue files also support referencing scripts and stylesheets instead of putting them together:

<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

The Each of the 3 tags might be filled with content to be pre-processed: typescript, sass, jade and whatever else.

view.html and view.js

This two files are transformed buring the pre-build phase by the Hi-Framework's webpack plugin. The first thing that is done in the pre-build phase is the deletion of every file in the _generated This two files are joined and a new view.vue file is created in the generated directory. The generated directory will only contain vue files resultant of the join of html and js pairs.

The view.html file must contain HTML, on the other hand, the view.js must contain javascript and it can even indicate the preprocessor to be used to process it, on its first code line, as the following example illustrates:

//typescript
//code comes here
//...

The view.vue file result of the join of the view.html and view.js files, follows the following name convention: controller-action.vue

View mode

Is a view.something.html file that has no view.something.js correspondent file but has a view.js correspondent file. During the vue files generation for view mode templates, the correspondent view.js will be applied.

4 - Integration of Webpack

Webpack would provide TypeScript and JSX compilation combined to Babel transpiler.

Invoke web-pack during maven build

The build (TypeScript and JSX) would be initiated automatically upon java sources compilation.

5 - Framework Development using TypeScript

Take advantage of the static typing to detect issues earlier and also take advantage of the ECMAScript6 features, with focus on modularization.

6 - Componentization

Hi-Frameworks was no function component concept in place. All it has are embedded views, which are an improvement to provide a component-like feature. Hi-Applications should assume functional componentization in order to increase code re-usability.

7 - Improve the frontiers code generation process - TypeScript

8 - Improve generation of hi-es5.js

9 - Improve template files and global events handling

10 - Server-side rendering support - only for initial page load

Redux integration (

Frontiers generation on server-side

Passing data from controller to View components

11 - i18N improvement - no more angular filtering (consider pre-processing)

12 - Ajax SEO compatibility

13 - Smart-caching improvement - consider pré-processing

14 - CSRF prevention Improvement (keep deploy id technique)

emjunior258 commented 7 years ago

What is Hi-Framework currently offering?

  1. Smart-caching via HTML manipulation using deployId as the changes tracking mechanism
  2. Call views from controller's actions
  3. Enforce access control
  4. Pass data to client-side via controllers
  5. Frontiers script generation and requests handling
  6. Assets routing (includes caching)
  7. CSRF protection
  8. Providing the framework code, the application business code along with the angular code in one single file - hi-es5.js.
  9. Functional routing
emjunior258 commented 7 years ago

What will the Hi-Framework be offering?

  1. Smart-caching via HTML manipulation using deployId as the changes tracking mechanism
  2. Call views from controller's actions
  3. Enforce access control on server
  4. Pass data to client-side via controllers
  5. Frontiers script generation and requests handling
  6. Assets routing (includes caching)
  7. CSRF protection
  8. Providing the framework code, the application business code along with the angular code in one single file - hi-es5.js.
  9. Functional routing
  10. Automating server-side rendering handling all the inherent problems
  11. Triggering client-side build automatically on java sources compilation
  12. Defining a migration path - how to decouple the client from the server completely without having to change the client
  13. More client-side technologies integrations.
  14. Improved AJAX user experience
  15. Ajax SEO Compatibility with Google bot