Example of large application

I have a new project to migrate an ERP developed with Oracle Forms to web technology and I am looking for some example of a great application developed with Vuejs. I have reviewed all awesome-vue projects but I have not seen any that have a great form for data entry.

So far the projects that I created with Vuejs did not have forms with hundreds of fields, and as I said, I have not seen any huge project or application created with vuejs + some css framework (vuetify, bootstrap, etc.)

I give you some examples of the screen that I would have to migrate.

Any help will be greatly appreciated.
Thanks in advance.

2 Likes

Hi!

I don’t think that VueJS is meant for old school Oracle apps with 100 fields in view.

I would suggest to use Angular2 for this or better yet talk to business remove 90% fields and leave only the useful fields.

It’s 2018 already but Oracle still lives in the past - I know that because I work everyday with Oracle Siebel CRM. :slight_smile:

2 Likes

I don’t see why angular would be better suited for this?

8 Likes

Hi @andris.vilde,
first of all thanks for your fast reply but why do you think that Angular2 or 4 is better than Vuejs?

IMHO,
I think that in this case it does not depend on the js framework but on the css framework and how to build the screen following the UX / UI patterns.

I am clear that Oracle is still working in the past, so I would like to see a great application built with components of the present, I want to see how they have solved the problem.

Thanks again for your reply.

PS: I can not remove any field from the screen, more than 90% are used.

I somehow have a strange association with big Oracle like forms for Angular :slight_smile: . It’s strictly my own gut feeling about it. I guess I should have said it differently instead of stating something as I knew what I was talking about. :sweat_smile:

Regarding Vue - all of it is possible in Vue too.
I have a project where we are re-designing Siebel views (30-50 fields in one view) to show only the necessary info and I’m starting to use Vue there.
I would strongly suggest talking with business - what they really want to see, now (in 2018) :dark_sunglasses: Maybe a cool PWA.

Well, for now I still have the same question but thanks for your advice.

Generally I wouldn’t hold my breath to find many publicly available OSS apps (Vue or other) that use such big forms - exactly because those tend to be internal tools like yours. :confused:

It will be real hard to find an example with such heavy content.

I say, Welcome to components world!

As you know it is purely UI/UX challenge. Divide the screens into components. You will be good to go with any JS libraries Vue/ Angular/ React.

Good luck.

1 Like

That’s how it’s going, but I do not like it that much. :disappointed_relieved:

1 Like

@anpegar Personally I am comfortable with React, Angular and Vue. The one I choose to use in my personal project is based on the following questions

  • How many forms are needed?
  • How many CRUD operations are needed?
  • Will end users complete most of their activities by filling forms or clicking around?

If there are many forms or CRUD operations and end users will accomplish most of their tasks by filling forms, I will go for Angular 4+.

CRUD operation with ngrx, vuex, and redux can be time consuming for nothing.

I have worked on a screen with just about 20 form fields and I got tired. I was doing it for the first time using a front end framework. I was so fortunate that it was with angular. In the midst of my work I switched to rxjs which is at the core of angular and I was happy.

So when dealing with many form fields and intensive form related operations especially on one screen, I think Angular based on its original rxjs approach shines out.

If my project will involve a lot of clicking around, hiding and showing some parts then react and vue will decide on that.

If you do not plan to use a state management technology(Ngrx, Redux, Vuex) in most parts of your app, please do not miss out rxjs (Just my personal opinion)

For your css needs please look at Clarity

5 Likes

Hi @Boyong,
Thank you very much for your answer, it has left things a little clearer.

I know something rxjs but I’ve never used it in a project so I’ll take a look to see how I can use it.

As for Clarity, I do not know either but right now I have several projects with Vuetify (material design) and I find it a bit tedious to have to change them, anyway, thank you very much for the information.

Once again, thank you for your response.

@Boyong is Angular 4+ that good for CRUD applications?

I have several CRUD Apps with Vue + Vuex + Jest, and I’m comfortable with this stack, testing is good,
adding new features is good, etc.

But I always thought that developing a simple CRUD with this stack was more verbose than I wanted.

I dont think there is reason for not doing it with vuejs. If your code properly organized why not ? I think event it can be coded with only native js and vuejs, without any external library.

Looks very basic for now. Try out using cards(panels), tabs and pagination components. It will help you to make better decision if you have a design (mock) ready at hand for all screens.

Tip: If you are using any CSS libraries (like bootstrap) try to increase the column count to 24 or something.

@msharitasa thanks.

Reiterating what has already been said but I don’t think there is any reason Vue would be bad for this. I’m currently working on an internal project with fairly large forms and to be honest, breaking the form sections down into components has made the project much more manageable.

If it was me, I’d probably start by trying to replicate that tabbed layout before worrying about the specific contents of each section though :slight_smile: You will probably be in a better position to make style decisions with a rough skeleton rather than with a specific part of the form.

1 Like

Hi again,

We have some prototypes of screens defined in paper because it is clear that as they are the screens we can’t migrate them to web with the same design.

I really opened the post to know and take ideas of how developers or product managers were migrating their applications of ten or more years ago to web applications using js and css frameworks.

Anyway, thank you very much for your collaboration … I’m taking ideas.
Thank you.

1 Like

I’ve built a few larger apps in Vue (both Vue 1 and 2). One app in particular had screens not too dissimilar to the ones you attached. I can say definitively that Vue is MORE than capable to build an app like this, and would be my preferred choice over any other framework.

I am personally not a fan of relying on UI frameworks (Vuetify, Bootstrap, or even CSS libraries like Bulma). Especially with Vue, you really don’t need them, unless you’re going for a specific look (like Vuetify’s Material influence). In most cases, a simple combo of a CSS reset, and a handful of SCSS vars/mixins, a company brand guideline (primary, secondary colors, fonts, etc), and you should be good. I also can’t live without “vertical rhythm” (modular scale) and “base line height”.

Vue’s ability to use slots and custom v-model components should get you 95% the way there. For instance, I’ve created <CurrencyInput /> and <DateInput /> fields that probably address half of what I’m seeing in your screenshots.

Also, this looks like a pretty obvious case for Vuex, so you might as well get your store set up with that from the get-go.

Personally, I have abandoned REST for anything other than file uploads, and the majority of my API calls are through GraphQL. Not sure who would be on the back-end of your project, but you’ve got a lot of fields here, and the explicit nature of GraphQL would help in making sure the front-end and back-end were working off a shared schema (you can use the graphql eslint plugin to compare your front-end queries/mutations against the API’s introspection results too).

Lastly, not sure how much experience you have with Vue, but it might be worth looking into Nuxt. Even if you disable the SSR functionality, Nuxt takes a lot of the boilerplate out of getting a larger Vue app up and running, and uses very sensible defaults/conventions (implicit routing based on folder structure, code splitting based on routes, etc.).

Hope that helps.

6 Likes

Hi @bjunc,
Very cool answer !!

With your answer, you have cleared many of the doubts I had in my mind about how to do things.

If i had a designer, sure that I would make the stylesheet of the product but as it is not so I had thought of using some of the existing CSS frameworks and modify them as far as I can or know.

Reading your answer I think our main problem is to choose a CSS framework that fits as much as possible to what we need.

I know GraphQL and Nuxt but on a very basic level, that is, I have never used them in a project or application. I think it’s a great idea to compare the store defined in Vuex with the GraphQL API, but I have not seen it developed in any open source project either. Do you know or have any? :slight_smile:

Now I have more clear how to do things, I think it would be:

FrontEnd: Vue + Vuex + GraphQL
BackEnd: Java (ws REST) + PLSQL + Oracle. Our database is Oracle and our business logic is in PLSQL.

Thanks again.

Bulma might be a good fit for what you’re saying. If Bulma followed a more BEM convention, I think I’d like it more, but it’s quite popular for this kind of “turn-key” UI that can be overwritten. Still, if selecting your CSS framework is your main problem, then you’re in good shape :slight_smile:

Just to clarify, GraphQL is a front AND back implementation. So in your backend stack listed above, you’d be swapping out (ws REST) with GraphQL. You can use websockets for request/response GraphQL too; which is my personal preference. It’s quite fast due to the lack of connecting time, and saves you the CORS preflight. It just takes a little more setup to do that.

Sorry, I don’t know of any open sourced GraphQL/Vuex projects off the top of my head, but there isn’t a whole lot that changes when going from Axios to Apollo. So for instance, in your Vuex store with axios (REST):

{
  actions: {  
    async fetchFoo () {
      let { data } = await axios.get('/api/v1/foo')
      return data
    }
  }
}

With apollo (in Nuxt, using @nuxtjs/apollo module):

{
  actions: {
    async fetchFoo () {
      const client = this.app.apolloProvider.defaultClient
      let { data } = await client.query({ query: FOO_QUERY })
      return data
    }
  }
}

Note, I left out the extra bits like try / catch, exception handling, and any store commit that might happen with the returned result data.

So basically, if you familiarize yourself with Vuex and GraphQL separately, you should be able to connect the dots on how they work together.

I was recently asked on the Elixir forums to do Medium article on how Elixir / Nuxt / GraphQL work together. I guess this is another reason to write that article. The Elixir part may not be of interest to you, but the rest would apply.

Anyway, good luck!

1 Like