We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Initial Feedback coming from Vuetify & Semantic UI

Initial Feedback coming from Vuetify & Semantic UI

We signed up for SyncFusion Vue components this week.  In the past 18 months we've burned through too many frameworks and really want to settle down for the long term.  As mentioned in the title, we've been using both Semantic and Vuetify recently, but also have experience with Bootstrap.

Here's some initial feedback...

First, the positives:

1. The breadth of selection in SyncFusion is very impressive, especially with the grid and pivot controls which we have a lot of use for.

2. The ability to choose themes is great, and Bootstrap, Material, and MS Fabric are superb choices.  Our users want to customize their look and feel and this lets us give them that functionality fairly easily.

There are two big negatives (and one smaller one) so far, though:

1. There's a lot more coding than I expected for a commercial library.  This thread is tagged sidebar as navigation is where we tend to start setting up and app, and I didn't expect to have to copy 100+ lines of CSS and custom methods into our code to make a simple Docking sidebar.  IMO this code should have all been part of the ejs-sidebar component and I should have had a sidebar up and running in 5 minutes or less without .

Along those lines, there's no (obvious) top-menu component either.  That would be another core navigation component that one would expect in a commercial library.

2. All of the docs seem to be focused on the CLI version of Vue, but we're using standalone non-CLI Vue.  We used the CLI for ember.js a few years ago and Angular earlier this year and don't want to go back to introducing that complexity into the build and deployment path.  Standalone mode lets us be more nimble, which is absolutely the most important thing for a small startup.  Please realize that not every 

3. Less importantly, the docs are difficult to read as they contain a lot of superfluous and repetitive information.  The needed details are in there, but it takes a fair amount of effort to dig through them to get to the important stuff.  I still don't know where to go in order to see the list of all available parameters for the ejs-sidebar.

We're going to keep on using SyncFusion as so far the positives outweigh the negatives, but it would nice to see the SyncFusion team take a look at Vuetify for how easy it is to get up and running with their UI tools both in terms of their components and their documentation.

11 Replies
SV Stas Volyansky November 7, 2018 08:29 AM UTC

I would like to add some feedback about Syncfusion to this article if the author don't mind.
The only reason why I found Syncfusion helpful is the amount of features available out of the box for the grid and some other components.
But with this there are a lot of dictated rules about the approach of working with Syncfusion components like Data Managers, odd ways to define grid column and row templates.
Also the testing of my own components with Syncfusoin children is pain.
I hope that Syncfusion team will be more oriented on the delivery and usage improvements of their controls rather than on new features. And this shouldn't be a problem for the free library, but it's commercial.

GR Graham November 7, 2018 04:49 PM UTC

I could be wrong, but it seems that the Grid and Pivot Grid don't need the DataManager component.

At this point we're abandoning our use of the Syncfusion library except for Grid and Pivot Grid.  The more we explore the components, the more it seems like an incomplete product that was rushed out.  That means decreased developer productivity, increased ramp-up times for new developers, and we'd have to write a lot of custom code to wrap these components.  None of those are appealing to a small startup.

SV Stas Volyansky November 8, 2018 08:25 AM UTC

Yes, the Grid does not require DataManager and if you don't use it - you'll get a lot of side effects that you need to handle in your wrapper.
By the way, have you met good Grid components with Grouping?

GR Graham November 8, 2018 09:06 PM UTC

Never seen a JavaScript grid with good grouping, no.  DataTables.net is the closest, but no Vue.js support (it seems like a relatively inactive project too)

SM Saranya Murugasamy Syncfusion Team November 13, 2018 01:08 PM UTC

Hi Graham, 

Sorry for the delay. We have updated the details in below table. 

Query 
Details  
There's a lot more coding than I expected for a commercial library.  This thread is tagged sidebar as navigation is where we tend to start setting up and app, and I didn't expect to have to copy 100+ lines of CSS and custom methods into our code to make a simple Docking sidebar.  IMO this code should have all been part of the ejs-sidebar component and I should have had a sidebar up and running in 5 minutes or less without. 
 
We would like to let you know that Sidebar is a flexible layout component that acts as a container to place any navigation components like Listview, Accordion etc. as per your application needs.   
   
  
While enabling dock support in Sidebar, the width of the container will be reduced to occupy minimum space in the visible area of your device. Since the contents used inside the Sidebar container wholly depends upon the application requirement, it is up to you to decide upon the elements to be hidden while rendering Sidebar in dock mode.   
  
  
Also, in dock mode a class ‘e-dock’ will be added to Sidebar container to indicate that the element is rendered in dock mode and you would need to hide the text elements (or any number of elements as per your requirement) in dock mode based on the ‘e-dock’ class being added in the Sidebar container.   
  
   
So, would you please kindly share us the exact requirement you are trying to achieve? so that we can provide an appropriate solution to meet your application needs.  
All of the docs seem to be focused on the CLI version of Vue, but we're using standalone non-CLI Vue.  We used the CLI for ember.js a few years ago and Angular earlier this year and don't want to go back to introducing that complexity into the build and deployment path.  Standalone mode lets us be more nimble, which is absolutely the most important thing for a small startup.  Please realize that not every  
 
We  have created and attached a Vue Sample using Webpack 4 without using Vue-CLI.  
 
 
Steps for creating Vue Sample using Webpack 4,  


 
  • Initiate a new project using “npm init”, provide the required details after completion a package.json will be created.
  • Configure the following Dependencies and Dev Dependencies in the package.json for webpack and babel loader required for Vue Project as follows,
  • "dependencies": {
  •   "vue": "^2.5.17"
  • }, "devDependencies": {
  •   "@babel/core": "^7.1.2",
  •   "@babel/preset-env": "^7.1.0",
  •   "@vue/test-utils": "^1.0.0-beta.25",
  •   "babel-core": "^7.0.0-bridge.0",
  •   "babel-loader": "^8.0.4",
  •   "copy-webpack-plugin": "^4.5.4",
  •   "css-loader": "^1.0.0",
  •   "html-webpack-plugin": "^3.2.0",
  •   "mini-css-extract-plugin": "^0.4.4",
  •   "style-loader": "^0.23.1",
  •   "uglify-es": "^3.3.9",
  •   "vue-loader": "^15.4.2",
  •   "vue-server-renderer": "^2.5.17",
  •   "vue-style-loader": "^4.1.2",
  •   "vue-template-compiler": "^2.5.17",
  •   "webpack": "^4.22.0",
  •   "webpack-cli": "^3.1.2",
  •   "webpack-dev-server": "^3.1.9",
  •   "webpack-merge": "^4.1.4"
  • }


 
  • Install the required Syncfusion Vue Component, I have installed Syncfusion Vue Calendar Component for the sample.
  • Configure the .babelrc file which is required by the babel loader as follows,
  • {
  •   "presets": [
  •     [
  •       "@babel/preset-env",
  •       {
  •         "modules": "commonjs",
  •         "targets": {
  •           "browsers": [ "> 1%", "last 2 versions", "not ie <= 8" ],
  •           "node": "current"
  •         }
  •       }
  •     ]
  •   ]
  • }


 
  • Create a folder “src” in the root folder, create files App.vue and index.js in the src folder.
  • Configure the index.js file as follows,
  • import Vue from 'vue'
  • import App from './App'
  • /* eslint-disable-next-line no-new */
  • new Vue({
  •     el: '#app',
  •     render: h => h(App)
  • })


 
  • Write the Vue application code in the App.vue file.
  • Create a folder build, and create the files webpack.config.base.js, webpack.config.dev.js, webpack.config.prod.js which is to configure the Webpack for the Vue Project.
  • // webpack.config.base.js
  • 'use strict'
  • const HtmlWebpackPlugin = require('html-webpack-plugin')
  • const { VueLoaderPlugin } = require('vue-loader')
  • module.exports = {
  •     resolve: {
  •         extensions: ['.js', '.vue', '.json']
  •     },
  •     module: {
  •         rules: [
  •             {
  •                 test: /\.vue$/,
  •                 use: 'vue-loader'
  •             }, {
  •                 test: /\.js$/,
  •                 use: {
  •                     loader: 'babel-loader',
  •                 }
  •             }
  •         ]
  •     },
  •     plugins: [
  •         new HtmlWebpackPlugin({
  •             filename: 'index.html',
  •             template: 'index.html',
  •             inject: true
  •         }),
  •         new VueLoaderPlugin()
  •     ]
  • }
  
// webpack.config.dev.js  
'use strict'  
  
const webpack = require('webpack')  
const merge = require('webpack-merge')  
const baseConfig = require('./webpack.config.base')  
  
const HOST = 'localhost'  
const PORT = 8080  
  
module.exports = merge(baseConfig, {  
    mode: 'development',  
  
    devServer: {  
        clientLogLevel: 'warning',  
        hot: true,  
        contentBase: 'dist',  
        compress: true,  
        host: HOST,  
        port: PORT,  
        open: true,  
        overlay: { warnings: false, errors: true },  
        publicPath: '/',  
        quiet: true,  
        watchOptions: {  
            poll: true  
        }  
    },  
  
    module: {  
        rules: [  
            {  
                test: /\.css$/,  
                use: [  
                    'vue-style-loader',  
                    'css-loader'  
                ]  
            }  
        ]  
    },  
  
    plugins: [  
        new webpack.HotModuleReplacementPlugin()  
    ]  
})  
  
  
  
// webpack.config.prod.js  
'use strict'  
  
const merge = require('webpack-merge')  
const baseConfig = require('./webpack.config.base')  
const MiniCssExtractPlugin = require('mini-css-extract-plugin')  
  
module.exports = merge(baseConfig, {  
    mode: 'production',  
    optimization: {  
        splitChunks: {  
            cacheGroups: {  
                commons: {  
                    test: /[\\/]node_modules[\\/]/,  
                    name: "vendor",  
                    chunks: "all",  
                },  
            },  
        },  
    },  
    module: {  
        rules: [  
            {  
                test: /\.css?$/,  
                use: [  
                    MiniCssExtractPlugin.loader,  
                    'css-loader'  
                ]  
            }  
        ]  
    },  
    plugins: [  
        new MiniCssExtractPlugin({  
            filename: 'main.css'  
        })  
    ]  
})  
  
  
 
Commands for running the Vue Project are as follows,  
  • npm run dev (For Development Mode with Hot Reloading)
  • npm run prod (For Production Mode)
 
I could be wrong, but it seems that the Grid and Pivot Grid don't need the DataManager component. 
 
At this point we're abandoning our use of the Syncfusion library except for Grid and Pivot Grid.  The more we explore the components, the more it seems like an incomplete product that was rushed out.  That means decreased developer productivity, increased ramp-up times for new developers, and we'd have to write a lot of custom code to wrap these components.  None of those are appealing to a small startup. 
 
We can use all the grid default functionality through DataManager. If you provide the local data and remote data (even a Json) , the grid actions (like sorting, paging , grouping and filtering) can execute through DataManager (we can convert as DataManager dataSource as instance of DataManager). Please refer to the below online demo links for Grid with grouping operation.  
 
 
As we have stated earlier, dataManager has been used for grouping operations as well in the grid.  
 
Pivot Grid 
Yes. Developer doesn’t require the data manger to perform pivot table (pivot grid) operation like filtering, sorting, grouping, etc., User only requires datamanager when he want to bind the remote data to pivot grid.  
  
Note: Sorting and formatting is performed using datamanager dependency inside our source.    
 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Saranya M 


GR Graham November 13, 2018 02:46 PM UTC

As soon as you introduce webpack you're no longer in standalone mode... I'd also point out that if this is meant to be an example of how simple the components are to use then you're far from missing the mark.  I appreciate the effort, though.  Thank you.

I opened (and closed) a support ticket giving more detailed feedback on where I believe the core issues lie.  

SM Saranya Murugasamy Syncfusion Team November 14, 2018 12:45 PM UTC

Hi Graham, 
 
We also have global script (Vue-es5 script) of our Vue components for standalone mode support that can be available in below documentation link, 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Saranya M 
 


GR Graham November 14, 2018 03:17 PM UTC

I actually didn't need that page to get the components to work Standalone.  The issue I'm pointing out is that all of the OTHER documentation assumes that I'm using the CLI.

JA Jesus Arockia Sankaran S Syncfusion Team November 15, 2018 10:36 AM UTC

Hi Graham,  

We have already planned to give separate documentation for Standalone(direct) scripts in Volume 1, 2019 release which is expected to be available in March 2019. 

Please get back to us if you require any further assistance on this.  

Regards,  
Jesus Arockia Sankaran S 


ZS Zbyszek Swirski March 24, 2019 07:16 PM UTC

Unfortunately this link opens empty page. 
Any chance for an example of a simple site using EJ2 for Vue, without import or system.js?
Just plain JS ES5 (I have to support IE) (<script src=?...>, etc) and plain Vue?

JD Jayakumar Duraisamy Syncfusion Team March 25, 2019 05:53 AM UTC

Hi Zbyszek Swirski, 
 
Query 1: Unfortunately, this link opens empty page 
 
 
Sorry for the inconvenience caused. Now we have re-directed this link to valid URL. 
 
Query 2: Any chance for an example of a simple site using EJ2 for Vue, without import or system.js? just plain JS ES5 (I have to support IE) (<script src=?...>, etc) and plain Vue? 
 
We have provided the documentation for standalone(direct) Scripts. Please find the below link. 
 
 
We also have provided the documentation for plain JavaScript ES5. Please find the below link. 
 
 
Created samples without using import or systemJS in Vue and JavaScript. Please find the below link 
 
 
 
Please let us know, if you need further assistance. 
 
Regards, 
Jayakumar D 


Loader.
Up arrow icon