Prototype of SemanticUI and generic templates

[pjedrzejewski]

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Fixed tickets	-
License	MIT
Doc PR	-

I started preparing generic CRUD templates with AdminLTE and it is far from perfect. The css/html is not that nice and Bootstrap is getting slowly out-dated. I discovered http://semantic-ui.com/, which provides tons of components out of the box that we can find useful both for admin and shop interface. Just have a look around the docs. Also it is actually much easier to learn. These components give us a lot of power both for Sylius itself as well as for customizing the admin/shop.

I managed to create (arguably) good looking shop homepage in like 15 minutes. :D But that's topic for another PR.

Anyway, summary of changes here:

• Use CoffeeScript;
• Separate Gulp tasks to "admin" section, later we add "shop" section. I also believe we will need to put them in separate folder sooner or later;
• Output final assets to assets/admin instead of directly to assets;
• Prepare generic templates for CRUD, they can handle pretty much any entity. The end goal is that you only configure form template to customize its layout, the index will be handled by Grids soon (tm);

Ignore the colors, it's because of video and we will tweak them to look more Syliusly later.
Video: https://www.youtube.com/watch?v=lVX7_SQ-jDQ

As soon as I get some review and support :D we can get this merged and generate new admin with grids and this fancy UI, yaml programming ftw.

[koemeet]

Look really nice, also semantic UI seems to be a lot better then bootstrap 👍. One thing I wanted to mention is why not use ES6 over Coffee script? I think more people are comfortable with ES6 than with Coffee script. You could use Babel to transpile ES6.

[nakashu]

@steffenbrem 👍 on ES6.
ES6 now handles everything that coffeescript does, and it standardized.
You can also use ES6 in TypeScript without any changes, which cannot be done with coffee.

Using coffee script will force many people to learn new opinionated language, instead of a standardized one.

[nakashu]

Semantic UI looks nice. It uses Flexbox ❤️

[tristanbes]

Use CoffeeScript;

I'm big 👎 for that. CoffeScript is falling behind & not a standard

I would advise to use ES5 instead

Why ES5 ? Because i'm afraid that ES6 would bring too much complexity, the syntax is harder to read/understand, and you need babel to transpile the code. We don't need that kind of complexity to make html boxes bounce, or draggable 🙈 .

I have nothing against doing ES6 in project with webpack, gulp and babel in projects, but doing it in Sylius could frighten backend developpers.
I can even 👍 for ES6 but only if Sylius guide the dev through it (add a bunch of doc on what it needs to have working JS, and what it does, and why we need babel, why we would need webpack etc... and then we get tickets for why webpack ? why not browserify ? why not AMD ? why not require.js ?)

If you're looking for a MVVM in order to build "complex" widgets using components, there are something quite simple to understand EVEN for php developpers and powerfull & clean i'd suggest Vue.js (Github) I've been personally using that in our SF2 app to re-write JS widgets in 70% less code & more readable & structured than jQuery.

Sure SemanticUI looks nice (so i'm 👍), even cooler if it uses flexbox, but hey, the frontend world sucks out all the time you have (and don't have) once you put one foot in it 🙊 . I'd rather see core features such as shipping, exports and imports etc.... than a beautilful UI pre 1.0

[liverbool]

SemanticUI is beautiful but hard to use with AMD, require.js, I personally don't like jquery approach for complexity application like admin-backend.

[pjedrzejewski]

Ok, I think we will get into infinite loop when discussing what is better, that's the frontend world. :D What I will do is revert to standard javascript, the thing is - we don't have that much frontend power/skills as community right now, I hope it will change soon because theming system is really nice and hopefully will bring more attention to Sylius from frontend devs.

By that time I want to use libraries as much as possible and write minimal amount of js. SemanticUI gives us a lot of ready-to use components and that's the main benefit with minimal js/html effort. Our admin must be simple, and nothing prevents the developer from using coffee/ECMA etc. in their custom code.

[peteward]

We use Coffeescript @pjedrzejewski so 👍 !

[adamelso]

👍 for Semantic UI - compared to the alternatives, Semantic UI feels to be the best option for Sylius (putting aside my differences that it uses LESS).

+0 for CoffeeScript - I'm neither for or against it.

[nakashu]

Results from google trends shows that Coffee is Dying, and Less is Dying
If we you look aside from subjective preferences, and want to attract developers we should consider the trends and standards.

Javascript Trends: ES6 vs CoffeeScript vs ES5
Css Trends: SCSS vs LESS vs PostCSS

As sylius is already using gulp and I dare to say it sure would for all assets with stable release. The babel transpiling part would not matter as it would be done in the background with just using > gulp something .. same as now we use > php app\console assetic:watch

[gperdomor]

Semantic UI looks nice, but Bootstrap is more popular, so if we need something additional, probably there's a plugin for that.

Bootstrap use SASS and Bootstrap 4 have a version with Flexbox

[pestaa]

Bootstrap is getting slowly out-dated

Bootstrap is getting out-dated extremely slowly. Can you please elaborate on why there is a massive switch so suddenly?

I realize that "Improved backend interface" is on the roadmap of the version under development, but frankly, a complete rewrite of the administration area seems like a bad investment.

Please keep up the technical superiority among ecommerce software, and consider sticking with industry standards (be it frontend frameworks or anything).

[tristanbes]

@pestaa : adopting semantic-ui wouldn't break the industry standard, it's a well known front end framework. 23k stars on github is not something completely unknown :-)

[pestaa]

@tristanbes While that is true, it can possibly slow down the adoption of Sylius. I have my share of annoyances with Bootstrap, but let's agree it is the de facto standard when it comes to building web interfaces.

[tristanbes]

standard != default choice.
boostrap = fundation = semantic ui = standard in the industry

Complex exotic thing can slow down adoption. semantic-ui is not one of them. Less dom, more understable class and structure and tons of ready-to-use widgets

[cdaguerre]

I just took a glimpse at Semantic UI and I think it looks really promising.
Not trying to debate here, just giving my two cents of thought:

• Bootstrap switched to SASS, which is continuously outdating LESS and already benefits from mature ports to any given JS frontend framework.
• On the other hand, Semantic UI uses LESS and unfortunately, for now, there is close to no angularjs support at all and it doesn't even seem to be under active development...
  I still think SemanticUI looks great and especially like the built in layered theming logic which could prove very useful in themed multichannel setups...

@tristanbes Angular = Backbone = Ember = ReactJS = standard in industry
Two of them are not supported by SemanticUI

[tristanbes]

@cdaguerre why would you need support for those JS framework when Sylius use none ? Not sure the answer of that question.
If you want let's say to use angular inside your backoffice, what prevents you from using https://github.com/angularify/angular-semantic-ui, or if you absolutelty want sass https://github.com/doabit/semantic-ui-sass

[cdaguerre]

From the repo readmes:

• As to the angular port you're refering to:

  IMPORTANT angular-semantic-ui is only 0.0.2, and NOT PRODUCTION READY.

• As to the SASS version (it only has basic functionality and its a GEM):

  The gem only has default theme.

[cdaguerre]

@tristanbes Once again, I don't have an opinion on the move from Bootstrap to SemanticUI, I'm just saying that it brings in some opinionated choices you wouldn't have to make while sticking to Bootstrap.

[pjedrzejewski]

Why I believe SemanticUI is better for Sylius: We do not have that much frontend-skills in the community and within the core team - at Lakion too. With Bootstrap we would need to implement a lot of the interface, widgets, etc. AdminLTE does not provide that many widgets which are ready-to-use. With SemanticUI we can have a really decent and simple UI with writing minimum html, css and most importantly minimal amount of JS.

Our current use of Bootstrap is not good at all, not really responsive. I tried semantic for more complex entities, with translations, filters, grids and it solves all the stuff for us. That's why I am so eager to use it.

With recent improvements to Resource (metadata, routing generation) and coming grids, we can really quickly migrate most of our current (not broken) functionality from admin. I did that already as prototype - trust me. :)

I don't want to use a specific JS framework or anything like that, because I don't think we are ready. Hopefully somewhere in future, with even better API we can create a kick-ass UI. Right now I want to keep things simple and use something that gives us a lot out of the box.

[Zales0123]

Is it intentional that this level has smaller indent?

[pjedrzejewski]

I will fix these comments in grids PR, so I think we can merge this.

[Zales0123]

For me ok ;) 👍

[michalmarcinkowski]

What if I do not specify this variable?

[michalmarcinkowski]

Great job Paweł! 👍

[pestaa]

Can't wait for the grids! Nice work. 👍