Direction of FRONTEND team

Direction of FRONTEND team

Damyon Wiese發表於
Number of replies: 62

Hi Themers,

If you are not aware, with the release of Moodle 2.5 the developers at Moodle HQ have been split into frontend/backend teams. The immediate directions for the frontend team are to progress the work of the bootstrap based themes with the goal of "clean" becoming the default Moodle theme for 2.6 and to make it work REALLY well with Mobile. 

Since the bootstrapbase/clean themes were integrated a number of discussions and opinions have taken place about various things such as "less", the role of bootstrapbase/clean, OOCSS - but we need to collect this input from the community and set a clear direction forward.

I have been researching and testing improvements to try and get a better grasp on the problems and the issues around it.

Please read http://docs.moodle.org/dev/User:Damyon_Wiese/Draft_CSS_Framework

And continue the discussion here. 

My goal is to create issues from the recommendations in that document that we agree to and get them on the frontend backlog so we can start working on them ASAP.

Thanks! 

 

評比平均分數:Useful (6)
In reply to Damyon Wiese

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

Hi Damyon

A great document for discussion. Thank you for the work put into it.

A couple of questions/discussion points:

Bootstrap uses less, but sass is also an alternative for precompiling css - is it feasible to add both into the discussion of the way forward at this stage?

Is there any benefit to creating a moodle specific css framework which takes the best bits of bootstrap/pure/others and ties in directly to the moodle specific html. I realise this has the potential for a massive impact on development workload, but does it have potential to make life easier in the long run or not?

Is it possible to consider Amy's suggestion in another thread of the inclusion of a pre-compiler in moodle - is this within the scope of the discussion/a practical way forward?

Richard

In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於
So one issue that probably needs exploring is what I generally think of as "semantic fundamentalism" for lack of a better phrase. Which is represented here by the following lines:

"The problem with this approach IMO is that adding specific classes to the HTML prevents themers from changing the presentation. It also combines logic about the presentation with the content (which CSS is supposed to avoid)."

and a few other comments further down.

This used to be a popular CSS approach, advocated by the like of Zeldman. And if you were building a one-person, custom built website today then it might still make sense. (Actually, now I think about it, this approach would only make sense if you were a professional web developer and needed to show off your skills, everyone else would just use a framework and move on to the more interesting parts of their web project i.e. the content or service they want to provide, not the the low level details of the HTML).

The basic gist is that you name your classes after the semantics of what the thing is, rather than what it looks like. And then, like the CSS Zen Garden, you custom write CSS to match those semantic names without ever touching the HTML.

This also gets confused with the semantics of using correct HTML e.g. putting lists in lists, using buttons for buttons, making headers headers, using tables for tables and lots of other very obvious things that seem blindingly stupid when you write them down like that. But unlike that other kind of semantics, class names have absolutely no impact on usability and accessibility, and are much closer to variable or function names in code. They're important to the developers, not to the users and should reflect the concerns of the developers.

But the reason there's been a move away from this is that it simply doesn't work in large projects being built by distributed teams. Often the new best practices that were developed at places like Facebook, Yahoo or Twitter fly directly in the face of this old-fashioned method. One thing they discovered is that, to put it bluntly, most pages on Facebook are not unique snowflakes. They're fairly boring re-arrangements of standard components. Components so standard that you can get 90% of them in a 3rd party library.

The final upshot of this is that it should be possible, and is desirable, to use standard Bootstrap HTML in many places in Moodle. In an ideal world those should be in renderers so that other frameworks, or the next version of Bootstrap can easily swap in other HTML. But, if time pressure strikes, simply using Bootstrap HTML to cover the last few places that aren't neatly reached via nicely modular code should not be seen as some great sin. It will almost certainly be better than the alternative which is a developer, under time pressure, coming up with some one-off HTML that varies in subtle ways from basically the exact same thing built by all the other devs under similar circumstances.

Which reminds me: It's worth mentioning that although the Zeldmanesque method gets talked about in Moodle forums quite a lot, it's not particularly reflected in the current HTML codebase which is a bit more random in it's methodology. So it's not like I'm saying we should move from A to B, I'm saying we've not got either A or B, and they clash at a fundamental level so going forward we should choose one (B!) and work towards that without getting confused by inappropriate notions from A. They're different paradigms, mixing them will only lead to confusion and a lot of pointless extra work that will provide no benefit.
評比平均分數:Useful (3)
In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於
Regarding the section on backwards compatability and keeping bootstrap specific code out of "core renderers", it would be possible to move the current "core renderers" into the Base theme and move the current BootstrapBase renderers into core without affecting anyone who inherits from those either of those two themes.

Any new renders would then be somewhat constrained by current Moodle, since you'd have to keep the current code (or a close approximation) pluggable with the new code. But it should work as well as the current tabs renderer does for most stuff.

In fact you could test this by doing this switch with the tabs renderer right now.
評比平均分數:Useful (1)
In reply to David Scotson

Re: Direction of FRONTEND team

Damyon Wiese發表於

We could do this but it requires that we move bootstrap into core moodle - what if we want to write a theme using pureio ? - then we have to undo all the bootstrap changes too.

By leaving all bootstrap in the bootstrap theme (including the requirement for less) we can sit on the fence a bit which sounds safer to me (but opinions are more than welcome).

 

In reply to David Scotson

Re: Direction of FRONTEND team

Damyon Wiese發表於

We could do this but it requires that we move bootstrap into core moodle - what if we want to write a theme using pureio ? - then we have to undo all the bootstrap changes too.

By leaving all bootstrap in the bootstrap theme (including the requirement for less) we can sit on the fence a bit which sounds safer to me (but opinions are more than welcome).

 

In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於
Writing a pureio theme would be very easy, you'd copy all the core Bootstrap renderers into the theme and then do a search and replace on some class names. (If the renderers were well written, you'd only need to do this to one single renderer file). How would you do it in a "sitting on the fence" approach?
In reply to David Scotson

Re: Direction of FRONTEND team

Damyon Wiese發表於

No - only the very simple widgets share common html structures. Anything moderately interesting has a  different structure (drop menus?). Making the bootstrap renderer the default adds yet another layer that needs to be unraveled. 

It is a myth that there is such a thing as perfect HTML that works with all frameworks. There is no perfect HTML, there is HTML targeted for bootstrap and there is HTML targeted for framework X. For the HTML to be useful it needs to be tied into the CSS - I experimented with mixins for this - and it was not reliable - it depends how bootstrap structure their less files and it doubles the amount of generated CSS. 

 

 

In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於
<div class="navbar">
  <a class="navbar-brand" href="#">Title</a>

  <ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Disabled</a></li>
    <li>
    <a href="#" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
      <ul class="dropdown-menu"><li><a href="#">Regular link</a></li>
        <li class="disabled"><a href="#">Disabled link</a></li>
        <li class="divider"></li>
        <li><a href="#">Another link</a></li>
      </ul></li>
  </ul></div>

vs.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
  <a href="#" class="pure-menu-heading">Site Title</a>

  <ul><li class="pure-menu-selected"><a href="#">Home</a></li>
    <li><a href="#">Flickr</a></li>
    <li class="pure-menu-disabled"><a href="#">Disabled Item</a></li>
    <li>
        <a href="#">Other</a>
        <ul><li class="pure-menu-heading">More from Yahoo!</li>
            <li class="pure-menu-separator"></li>
            <li><a href="#">Autos</a></li>
            <li><a href="#">Flickr</a></li>      
            <li><a href="#">Answers</a></li>
       </ul></li>
  </ul></div>

So we're talking pretty darn close for most things since they both follow standard industry practices for the actual HTML.

In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於
Regarding the Bootstrap and Pure navbar examples. The reason that Bootstrap needs the extra code for the seperators is because it's supports IE7, which doesn't support :before. Bootstrap 3, which no longer supports IE7, now does it the Pure way (or more likely, Pure copied the Bootstrap 3 way).

http://rnikitin.github.io/components/#breadcrumbs (note this is unofficial docs of an unreleased version, they've been asking people not to publish them because they get so much grief from people commenting on their half-finished work, so don't assume that it's look, particularly the buttons, is final)

Which brings me to my wider point. We should upgrade to Bootstrap 3 for 2.6. I was going to start work on this today, I'm not anticipating it being a big deal, and it brings a lot of good things to the table.
評比平均分數:Useful (1)
In reply to David Scotson

Re: Direction of FRONTEND team

Damyon Wiese發表於

Yes - it is a useful example - because it shows that there is always some fiddle stuff to sort out - and how would this fiddly stuff look in php/twig and for the different css frameworks.

In reply to Damyon Wiese

Re: Direction of FRONTEND team

Amy Groshek發表於
Hi Damyon,

For each page element, see if the HTML structure needs changing to work well with either CSS framework


Absolutely. IMHO one of the most important things is the egregious task of actually cleaning up existing HTML markup so that we identify a limited number of component types and reuse them across page views. We seriously need to reduce the conventions in Moodle. That may require some "letting go" on the part of developers and end-users who are accustomed to a very specialized look for a particular page or activity, but it is necessary. It's very challenging to create a reliable theme at present bc there are so many specialized views.

Some things David, Mary, and I have already identified here:
https://tracker.moodle.org/browse/MDL-37264

A big topic in OOCSS that I'll mention it once again: Moodle's CSS relies very heavy on use of IDs as selectors. This creates a kind of gateway effect that requires use of these IDs any time you need to write an override. Styles do not cascade intuitively when you are mixing IDs and classes. I created a codepen to demonstrate this: http://codepen.io/amygroshek/pen/IamzH Many of the IDs present are used by JavaScript and that is fine, but that doesn't mean we need to use them in CSS just because they're there. And if an element is not a trigger for or recipient of JavaScript events it does not need an ID at all.

I really like the idea of a living style guide presented here: http://www.stubbornella.org/content/2013/06/05/creating-living-style-guides-to-improve-performance/
Stuart and I have been discussing that concept for a while, and Totara contributed the element library which might be a good starting point: https://moodle.org/mod/forum/discuss.php?d=215807

Templating engines: Yay. I've used Twig and I like it. Way better option than oodles of renderers.

評比平均分數:Useful (2)
In reply to Amy Groshek

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片
For each page element, see if the HTML structure needs changing to work well with either CSS framework

+1

Love the stubbornella guide on living guides too - and I've been using that element library since you linked it in that discussions Amy - thanks for the work!

In reply to Amy Groshek

Re: Direction of FRONTEND team

Damyon Wiese發表於

I've checked out the totara element library - and it is good - we just need to to cover 10x more and include structural things as well as specific element. I also think the docs wiki is where we should flesh this out.

In reply to Damyon Wiese

Re: Direction of FRONTEND team

Urs Hunkler發表於
Core developers的相片

The Totara element library is nice, I checked it and used it immediately in my theme work. On the BeyondTellerrand conference I heard Brad Frost's talk about his new Pattern Lab. The description on the  Github page:

"All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages."

When you look at the way the Pattern Library works you see it uses exactly the same structure as websites should be build. First define the "Atoms" like Type and other basic elements. Then create the molecules by combining the atoms. In the Pattern Library the "molecules" are not created from scratch but the atoms are "included" (Brad uses PHP and includes the atom files). The same with the next stage the "organisms" and so on.

The philosophy behind the Pattern Lab helps designers and developers to understand the structures. Start to create the basic elements and build the complex ones by combining the basic elements. Never invent new elements in complex structures - always use the basic elements. And when some new elements are needed create them as an atom. Think carefully if you really need a new atom or if you can get the solution by combining existing elements. Then build the new molecule together with the existing atoms. Create the organism you need for the page and put it into the page.

When I heard Brad's talk I immediately thought this clever approach would help to solve the Moodle front-end needs.

The basic concept of the Pattern Lab sounds quite similar to the Totara element library. Show what you have. The big difference is that in the Totara element library all pages are constructed from scratch. In the Pattern Lab the atoms are created. The higher complex structures work by including lower complex structures. Always with the good advice - take what you have - don't invent new. And you get the much desired consistency in the pages - automatically.

To find an entry point working with the Pattern Lab may be to set up two installations.

One to collect all the elements Moodle uses now to be able to find a way to detect the similar but slightly different atoms/molecules and replace them with one. This approach would help to enhance the consistency in Moodle pages with no/minimal modifications in the Moodle codebase.

The other to create new atoms using the much discussed new code/CSS structure with clean class naming. And form there  build the molecules and so on to show how the pages should look in the future. This second Pattern Lab would help to build and understand and test the new approach.

What do you think?

評比平均分數:Useful (1)
In reply to Urs Hunkler

Re: Direction of FRONTEND team

Urs Hunkler發表於
Core developers的相片

At Vimeo if you may be interested: This talk by Brad Frost was held at beyond tellerrand 2013, May 27 – 29, in Düsseldorf where he announced his brand new Pattern Lab: http://vimeo.com/channels/beyondtellerrand/67476280

PS: You may notice the short sequence at 50:20 in his talk 眨眼

In reply to Urs Hunkler

Re: Direction of FRONTEND team

Mary Evans發表於

Interesting and informative Video thanks for sharing. I liked the reference to Dave Rupert's Tiny Bootstraps for Clients idea which is a coincidence as we obviously had the same idea. My first bootstrap theme is called 'Tiny Bootstrap Project' which I put together September/October last year. It's parent is base theme so is totally different than Boostrapbase which is now dominating Moodle.

Would be good if you could offer your help and expertise in Moodle themeing again, although I know you must be busy. 微笑

Cheers

Mary

In reply to Amy Groshek

Re: Direction of FRONTEND team

Jason Fowler發表於

The frontend team are very eager to get the element library in. It will make our lives so much easier.

In reply to Amy Groshek

Re: Direction of FRONTEND team

Jason Fowler發表於

Also, big supporter of not using IDs for CSS, just for javascript. helps cascading the styles all the more!

In reply to Damyon Wiese

Re: Direction of FRONTEND team

Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Dear Damyon,

+10 from me 微笑

A very comprehensive strategy.  I don't think at the moment we can see the wood for the trees, so the first step in effectively refactoring, consolodating and stripping out what is not needed is a good one - like a structured walk through.

In my wanderings I've found annoying bits of css in the modules that cannot be easily overridden even though the guidelines say that they should not do so.

Perhaps we will have a better idea of what is the best framework / templating mechanism when there is less wood in our forest.

Could we learn something from the Wordpress templating / page layout mechanism which I think is bespoke to Wordpress and pure PHP from a glance?

Cheers,

Gareth

In reply to Damyon Wiese

Re: Direction of FRONTEND team

Urs Hunkler發表於
Core developers的相片

Damyon you start this discussion in the very moment I am fundamentally rethinking my Moodle theme work. With the switch to responsive layouts and multi device delivery a lot must change.

Not only needs the layout to adopt to different screens but also the page weight (KB/MB delivered) needs to  be reduced radically. And the content needs to be prepared fast on the server and rendered fast in the different browsers. So the key demands for Moodle pages which are capable to deliver an acceptable or even good user experience are responsive layouts and speed.

To implement responsive layouts is relative easy with Bootstrap. To work on the weight and speed is much more complicated. I know that the Moodle way to cascade themes by overriding CSS in several stages is not good for speed. To base the Moodle CSS on an existing framework is an easy starting point to get started immediately. But we buy in a lot of unused CSS.

A speedy and optimized solution you/we can get only by setting up the HTML structure and the CSS Moodle needs. Optimized for Moodle. One can steel everywhere and collect from existing approaches. Harry Roberts talked about "Architecting Scalable CSS" on the BeyondTellerand conference in May. His credo was "optimize". One slide I remember was "Each client needs their own Bootstrap" - I think the same is valid for Moodle.

When I look at the purecss.io/extend page today I like the way how Pure and parts of Bootstrap are combined. Moodle uses YUI - why not take purecss as a base and build the Moodle CSS on top. Use parts of Bootstrap where appropriate. And optimize, optimize, optimze.

By the way the pure "skin builder" looks interesting.

In reply to Urs Hunkler

Re: Direction of FRONTEND team

Damyon Wiese發表於

Some of the reasoning behind supporting bootstrap is it's popularity. This means that there is a bigger community of designers who already get bootstrap and can jump in and write themes. That said - I like the look of Pure IO a-lot and I think we should build a Pure IO based theme too - just not in core. 

I definitely agree with your comments about "Each client needs their own bootstrap". Except that it doesn't have to be bootstrap. Just my adding our own pattern library and updating our renderers to use the pattern library we get our own "Moodle framework" and because this is consistent and documented, we can better support other CSS frameworks on top.

In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於
Is there some way I can mark bugs in the bugtracker to show that they'll need to be fixed in order for people to use Pure? Maybe a META or something? (edit: or a label, I've noticed that I can create them)

e.g. if you want to use Pure's pagination widget you'd want to fix the issues in bug MDL-35367, perhaps based on the renderer code I submitted as MDL-38260

or if you wanted to use Pure's vector icons then you'd need to include Font Awesome somehow which is MDL-23493 and if you went further and tried to use it for Moodle's action icons too you'd hit some of the issues mentioned in MDL-37231.

And there's a whole stack of bugs that prevent you properly using Bootstrap (about controlling what the form, button and table markup is for example) that I've not filed yet that apply equally to Pure. If I could tag them in some way so that people working on Pure-based themes can work together on them then that could be good.
評比平均分數:Useful (1)
In reply to Damyon Wiese

Re: Direction of FRONTEND team

Urs Hunkler發表於
Core developers的相片

Damyon, my impression is that one main reason why people would like to use CSS frameworks is the difficult situation to style Moodle - to fill the gaps.

When I remember right you had written that HTML/classnames and CSS are closely connected. Agreed. The best way out as I see it would be to clean up Moodle HTML/classnames and build consistent CSS. And not think about third party CSS frameworks which might need to fit on top of it - this approach will diffuse the task.

In reply to Damyon Wiese

Re: Direction of FRONTEND team

Urs Hunkler發表於
Core developers的相片

An interesting view on the discussion how to setup Moodle HTML and CSS I discovered when I wrote the postings. Moodle developers decided against a development framework and did the work to setup Moodle from scratch. If that is considered a good strategy for Moodle to be able to deliver the environment needed this approach may be right for the front-end too. And now with the front-end team Moodle HQ has the competences.

I think it is.

In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於

I'm a bit concerned about how the outlined plan translates into concrete actions for the 2.6 dev cycle.

Some things I'd suggest could be done in that 4 month window and could be done in simple stages that continually improve Moodle without many big-bang changes in case we run out of time:

  • Copy current renderers into Base theme
  • Rewrite all current renderers with Bootstrap compatible code
  • As part of above, break current renderers into modular logic and display parts...
  • ...and tweak renderers API to better suit modern frameworks (might need simple API translation layer in Base renderers)
  • Shift a few more bits of code into using renderers that exist
  • Shift a few more bits of code into renderers (grids, a-z pickers, forms, ...)
  • Declare Moodle "mobile first", in 2.6 timeframe this mostly involves fixing silly bugs that haven't been found/fixed due to lack of mobile usage e.g. PDF display on iOS, and testing everything on phones
  • Declare Base/Standard theme deprecated after the next release (2.6)
  • Delete all lines of CSS that support IE7 or previous (and various other simple CSS cleanups e.g. redundant gekco/webkit usages)
  • Have a separate Bootstrap theme that apes the look of Bootstrap more completely just to prove it's possible before going off and making Moodle specific tweaks to the default theme Clean (which shares the Bootstrap toolkit underneath).
  • Upgrade to Bootstrap v3
  • Integrate a good 3rd party CSS compressor

There's plenty more to do and they're mostly kind of boring clean up tasks of old code or simply fixing bugs. I'm a bit worried these things will get overlooked in favour of more glamorous tasks that involve green field development, snazzy new tech and inventing exciting new ways to do things from scratch.

In reply to David Scotson

Re: Direction of FRONTEND team

Mary Evans發表於

Depreciate Base & Standard which will also mean Canvas too, but what about all those themes out there that people have paid lots of money to have tailor made to their own branding, not to mention schools that have just moved to 2.4 after waiting for their local authority to migrate from 1.9 with brand new themes to match?

This will go down like a lead balloon. Sorry to sound so negative, but I do not agree with any of this at all.

評比平均分數:Useful (3)
In reply to Mary Evans

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

Please DO NOT deprecate base/standard/canvas!!!

I have been raising this issue over and over again, but it keeps on coming up, particularly from developers with what appears to be an fixed interest in Bootstrap and only bootstrap as the way forward. It continues to be a cause for concern and one I am not able to confidently answer people who ask me the questions. I reiterate the assurances I am reading and then the same issues are raised again in another thread, the same suggestions that everything be moved to bootstrap and base/standard get sidelined.

In reply to Richard Oelmann

Re: Direction of FRONTEND team

Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Hi,

To be honest I think at the moment that Bootstrap is in a phase of 'proof of concept'.  It is there to show that frameworks can be used to create themes and hopefully will spark more - like the YUI pure that has been mentioned.  However as it is a 'proof of concept' then you would be as popular as a banker with a bonus if you were to depreciate 'base/standard/canvas'.

It would be like building a new beautiful extension to a house (Bootstrap) saying it was the only place to live and then knocking down the rest of the house.

The solution here is user / developer choice, removing 'choice' does not facilitate creativity or a stable alternative fallback position to go back to when things go wrong.  When Ariane 5 blew up it was because they had taken code from Ariane 4 and modified it thinking it would work but the physical properties of the rocket caused overflow in the code.  So if 'Ariane 4' had been moth balled as soon as 'Ariane 5' came in = no satellite launching platform = nothing for the customers to use.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: Direction of FRONTEND team

David Scotson發表於
Gareth, I'm not sure that's a great analogy. I'm talking about deprecating something, no explosives are required. It's more like putting a sign on a door saying "There's a newer, better, more accessible toilet down the hall that we'd prefer if you used" (and having sent a memo round a year or so previously to let people know this was going to happen).

http://en.wikipedia.org/wiki/Deprecation

The "demolition" happens some time after the deprecation, once enough people have started using the new facilities that it no longer seems worth re-filling the soap in the old ones and even then Moodle's open source so it would be more like locking a door that everyone has the key to open if they really want.
In reply to David Scotson

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

"and having sent a memo round a year or so previously to let people know this was going to happen"

there you have the problem, in your own words David.

A bootstrap based theme added into core was mooted earlier this year. This quickly became a bootstrap based replacement for 'base' in time for 2.5 - which in turn has become 'deprecate the existing base/standard themes in time for 2.6'

It's not the fact that people want to push forward with framework based themes that is causing the issue, its the speed at which people are pushing for the existing themes to be sidelined.

In reply to Richard Oelmann

Re: Direction of FRONTEND team

David Scotson發表於
Bootstapbase didn't replace Base in 2.5. You can go check yourself, Base is still there in all its glory, underlying the default theme Standard and every other included theme in Moodle, with the sole exception of Clean. So perhaps it's not going quite as fast as you think it is?

And I'm not sure that you and I have the same definition of "deprecate". What do you think is going to happen when this deprecation occurs? The whole point of deprecation is to give advanced warning of changes while maintaining backwards compatibility. How can delaying the warning help anyone?
In reply to David Scotson

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

No it didn't - but not through want of trying, if you read some of the discussions! If you want specific quotes, I'm sure I can find them - they're there in MANY threads.

And yes I appreciate the differences in our interpretation of the term 'deprecate' and I would bring back a point that has been made in other threads to other people. These forums, particularly this themes one, are full of community members who are not developers and for whom the term 'deprecating' infers removing all support from, not developing any more and essentially 'killing off'. Those are the people I am dealing with and handling these queries from on a weekly basis and that is what THEY are reading into these comments.

In reply to David Scotson

Re: Direction of FRONTEND team

Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

Dear David,

In tongue in cheek ;) - nor is a 'toilet' analogy as brings in concepts like 'going down the pan' ;).

Is this the 'memo' or in a year will I find the Vogon's turning up to demolish my computer?

On a serious note, I don't think its early enough to decide on if 'base / standard / canvas' should be depreciated as Bootstrap / Clean has not yet proven itself to be a complete replacement where future demolition could be considered and therefore with the intent of the word 'deprecation' to show to users that they need to consider switching and investing in a migration plan.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: Direction of FRONTEND team

Mary Evans發表於

Just generalising here,

This is to no one in particular, but you could actually say there are problems with layouts in all three themes Base/Standard / Canvas, and some of the core themes too.

Canvas layout is fundamentally flawed. Standard is not exactly the best, although it is perhaps better looking than base theme. (header/menu/navbar spring to mind here).

Much of the problems with all themes stem from the problems from within Moodle. Bootstrap is good/ or at least as the potential for fixing these, and some work has started.

There is a lot of repair work going on at the moment, fixing Bootstrap to Moodle, which is good, and a a few months down the road should see a vast improvement, and even a better platform to start creating themes again for Moodle using the new framework.  But it will take time to do, so talking about depreciating base/standard which effectively means ALL Moodle standard themes is a bit much.

I could fully understand the need for a new breed of themes for Moodle 3.0 but not before then.

I know Martin has talked about dropping MyMobile theme in favour of Bootstrap, so it is possible for Martin to make the same decision about Standard Moodle Themes too.

It's going to be hard for use to swallow the bitter pill, that all the nice themes we have been happy to make for Moodle are all going to be trashed.

All I know is that it is a sad time for all.

Mary

評比平均分數:Useful (1)
In reply to Mary Evans

Re: Direction of FRONTEND team

Gareth J Barnard發表於
Core developers的相片 Particularly helpful Moodlers的相片 Plugin developers的相片

I thought the 'MyMobile' theme had been effectively dropped as no work is being undertaken to fix the issues with it?

In reply to Gareth J Barnard

Re: Direction of FRONTEND team

Mary Evans發表於

It is still included. The reason no one is repairing it, came about after your discussion with Martin, so we stopped working on it, if you recall, as we felt it was thought it was a waste of time.

評比平均分數:Useful (1)
In reply to Mary Evans

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

+1 Mary

There are definitely issues with the base/standard/canvas themes that need work and many of those problems do stem from within Moodle itself - the work David (and others) has being doing both in bootstrapbase and with the renderers and so forth is not just a valuable contribution, it's essential for moving forward. But I agree wholeheartedly (and this was my entire point that seems to have been transformed into an anti-progress stand that it was never meant to be) that talk of deprecating existing core themes is premature. Not that it shouldn't happen at some stage, but that it shouldn't happen now! (Moodle3 for me too!)

Moving forward is essential - losing support for core themes half way through 2.x series is not, neither is the uncertainty being created in the community. For me, I'd also like to see work continuing on MyMobile and the ongoing development of the Moodle Mobile app - alongside responsive themes. @Gareth, I suspect that even if that work continued outside core, many people would be VERY interested! If we look at many big sites out there, they don't try to serve up the same content onto multiple screeensizes - they provide variations of content (check out bbc.co.uk and m.bbc.co.uk) based on the needs of the device user. Responsiveness can come through a variety of technological means (as well as content design), not only through making desktop themes work on mobile phone screens - or given the push to 'mobile first' making mobile themes work on the desktop. I'll guarantee the BBC webdesigners don't create the content on a mobile phone! 微笑

'Losing' all our Moodle2 themes when we move to Moodle3 is inevitable, just as happened when we moved to Moodle2 from 1.9 - but at that stage we will probably find we are still getting requests for help for Moodle2 themes for 3-4 years afterwards (at least), just as happened with 1.9. I just don't want to see that happen half way through the Moodle2 series.

In reply to Richard Oelmann

Re: Direction of FRONTEND team

David Scotson發表於
Richard, I get the general picture that "change is bad", but exactly what changes are the big sticking points here?

Which bits of base/standard/canvas do you really not want to lose? If those bits could be moved into a future default theme, and/or a future base theme then would that help? If base/standard/canvas continued to exist in core Moodle beyond 2.7 but bits within theme (e.g. the forms) were re-written in much the same way course lists were rewritten in 2.5 would that be a problem for you?

I'm trying to suggest concrete, actionable changes to improve Moodle for everyone and I'd happily modify them to help you out in any way I can but you're not giving me much to work with here. For some people that use Standard an upgrade to Clean as default in 2.6 would be nothing but positive. Please outline the difficulties others would face so that we have time to fix them.

In reply to David Scotson

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

David -

I am not at any point saying 'change is bad' or implying that new framework based themes are not the way forward. However, I believe that deprecating base/standard at this stage is (very) premature.

Framworks based themes (I would prefer Moodle to be framework agnostic but that is a different part of this discussion) are the way forward. But the implication of deprecating base/standard to many in the community is that they become second rate themes, they are only there to provide support for people who can't upgrade and that they do not get the attention of the bug fixes and core developments that go into other areas. This causes uncertainty and concern for many institutions who having upgraded to Moodle2.x recently have an upgrade path over the next few years and see this as a stumbling block - I get frequent calls about whether themes that have been developed will continue to work if they upgrade to 2.5 or in the future to 2,6+ or whether they will have to spend more money/time redeveloping those themes or getting new one made.

Far from being a problem, your suggestion of continued work on the base/standard themes to benefit beyond 2.7, alongside the newer themes, is all I am asking for!

And as for not giving you much to work on, I would have to say I'm not the one advocating the death of base/standard! If anything I would say that it is the people who are making those comments who are not giving the huge community who are still using base/standard child themes sufficient confidence of the route map forward. Deprecating base/standard is not (again, my opinion) an option until the rest of the work is completed and in place and bedded in and certainly not within the timeframe you give in your earlier post. Bootstrapbase is not currently a stable, finished, complete 'base' theme - with all the work being done, I hope it will be for 2.6 - but at the moment I believe it is far too premature to be talking of deprecating base/standard before 2.6 is out.

In reply to Richard Oelmann

Re: Direction of FRONTEND team

David Scotson發表於
I've read over all the posts on this again and I'm still totally baffled by the collective response.

How can you introduce a new Moodle front-end, which you yourself seem to acknowledge as "the way forward" without at least implicitly deprecating the other, older method?

Isn't deprecating just the official way of saying, "this is no longer the way forward"?

All the concerns about people needing to make long term plans are exactly why people use deprecation. So that people know that a change is coming and can prepare for it appropriately to align with their own internal timescales and priorities.

It was the least interesting part of my post, just a reminder to clearly communicate decisions that appear to have already been made so that everyone has sufficient heads-up for future plans and is on the same page. Keeping those decisions and plans obscure isn't helping anyone.
評比平均分數:Useful (3)
In reply to David Scotson

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

David - as I have said many times in many posts: It is not a matter of if but when. And I hold by my comments that it is far too early to be talking about deprecating base/standard when the replacement is not ready yet.

Get the replacement ready, get it embedded, get people using it THEN talk about deprecating existing structures. That is how you introduce a new Moodle front-end: by developing things properly - getting them finished and tested, THEN telling people 'here we are, look at this wonderful feature we now have' - or Moodle is going to become like those Spanish hotels from the 80s and 90s: Wonderful in the brochure, but when you get there, you're staying in a building site - Unfortunately, too many people's perception of OpenSourceSoftware already.

'Release early and often' isn't always the best way forward - especially into an education community of teachers and academics and their students/pupils rather than a developer community of software engineers.

Bootstrapbase is not yet ready to take its anticipated role as the replacement for base/standard. When it is then will be the time to start notifying people about deprecating base/standard.

To use your anolagy from earlier, its like putting a sign on a door saying "There's a newer, better, more accessible toilet down the hall that we'd prefer if you used - but we haven't finished building it yet and the plumbing's not fixed."

Yes, deprecate base/standard when the time is right, yes move forward with developing the new front end - but don't deprecate existing features until the new one is 100% ready and tested. Who knows what will leak out of the plumbing otherwise!

評比平均分數:Useful (1)
In reply to Richard Oelmann

Re: Direction of FRONTEND team

Martin Dougiamas發表於
Core developers的相片 Documentation writers的相片 Moodle HQ的相片 Particularly helpful Moodlers的相片 Plugin developers的相片 Testers的相片

We've always planned to keep supporting base/standard for a least a year or two.  Last thing anyone wants to do is cause too much extra work for sites out there.

That said, of course we all want nice responsive sites so work continues apace on making it very attractive for people to upgrade their own themes at some point.

In reply to Martin Dougiamas

Re: Direction of FRONTEND team

Richard Oelmann發表於
Core developers的相片 Plugin developers的相片 Testers的相片

For the benefit of other community members reading this thread - base/standard does not preclude responsiveness in a theme: see Zebra/Krystle and others for work being done.

In reply to David Scotson

Re: Direction of FRONTEND team

Gavin Henrick發表於
Plugin developers的相片

As Damyon mentions in the spec  :

Backwards compatibility is a must have requirement for themes in Moodle. Many people have spent a lot of money paying for custom themes and do not want to have to rewrite their themes on upgrade (Some small changes are acceptable if they are documented). To me this implies that we need to keep bootstrap specific HTML out of the core renderers.

From my perspective as a consultant to institutions and corporate organisations,  I would have to wholeheartedly agree with that statement. Some people will have invested a few thousand in their branded moodle theme - which would be based off the existing themes. They would expect (based on knowledge at that point) to have these usable with some minor bugfixes for a number of years.

I know of no organisation that currently maintains the 6 month major upgrade cycle, so most will be jumping 2.4 -> 2.6 -> 2.8 -> etc. So they think upgrades of being a yearly process.

So what could be a likely timeline with assuming the following goal is met?

Dec 2013 - Moodle 2.6 - Clean becomes default in Moodle

Will the existing themes still be usable (the core ones that they are based on bug fixed) for 2-3 more years (upgrades in their minds)?

 

In reply to Gavin Henrick

Re: Direction of FRONTEND team

Damyon Wiese發表於

I do not see any valid reasons to break/deprecate existing themes (and I see lots of reasons not to).

 

In reply to Mary Evans

Re: Direction of FRONTEND team

Danny Wahl發表於

I've been in education long enough to know where this is coming from, but I've been in technology long enough to know that it's not really valid.

You should either pay a little for a one-off theme or a lot for a theme with support.  If you paid a lot then bug your support provider to upgrade the theme.

My experience as both an administrator AND theme developer is that people (read: academic institutions) don't want to spend ANY money at all, and I bet a large percentage don't. (just see the thousands of "how do I add a logo..." threads)

That said I still have to support a windows 2000 machine that we use for literally one application (which is no longer supported) because "why should we upgrade when this one works?" - yeah, it was expensive.

In reply to David Scotson

Re: Direction of FRONTEND team

Damyon Wiese發表於

This is why we are discussing this.

There is no agreement on:

  • Copy current renderers into Base theme
  • Rewrite all current renderers with Bootstrap compatible code

(And I do not agree)

Currently we have:

core_renderer => Moodle specific HTML (legacy?)

    base_renderer => (None)

   bootstrapbase_renderer => (Moodle specific HTML + Bootstrap overrides)

   customtheme_renderer => (Moodle specific HTML + Custom overrides)

 

Moving bootstrap into the core renderer would give:

core_renderer => (Moodle specific HTML + Bootstrap overrides)

   base_renderer => (Moodle specific HTML - Bootstrap overrides) 

   bootstrapbase_renderer => (None)

   customtheme_renderer => (Moodle specific HTML + Custom overrides - Bootstrap overrides)

Which is a mess and requires many changes to all themes not inheriting from base.

 

IMO this should be:

  • Create CSS pattern library based on existing classes
  • Update moodle renderers to use the pattern library wherever possible
  • Continue adding bootstrap specific renderers where required (and look to see if a php template language will simplify the renderer code). 

(Also - this is a great discussion - thanks everyone!)

In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於
What do the minuses in your diagram mean?

You seem to be suggesting that overriding the the Bootstrap renderers in core will require some extra effort beyond writing their replacement, but I can only understand that if you think I am proposing leaving the renderers as they are now, where logic and HTML are all mixed up and it's a complete pain to make small changes to HTML output without effectively forking large bits of core Moodle logic. Instead I propose taking the Bootstrap pattern library as a template for modular functions which can be easily updated or replaced and having those small modular units represented by newly created renderers.

e.g.

Good current renderer:

https://github.com/moodle/moodle/blob/master/lib/outputrenderers.php#L2329-L2335

Bad current renderer:

https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/renderers/core_renderer.php#L46-L116

Overriding the first is easy whether the HTML content is compatible with Bootstrap or any other framework as it does one fairly standard thing in isolation. Overriding the latter is a complete pain regardless of what the default HTML looks like since the decisions are all hard coded and presentation is intertwined with logic.

You could of course tease all those hard-coded decisions out, then rebuild it with nice modular code that can represent both Moodle's traditional choices and allow people to make their own decisions about how the login info should be presented. It might be quicker and easier to just shift the old renderer in one go into the Base theme for those who require or desire backward compatability though and not waste time attempting to recreating something that already exists when you could put the effort into making sure the new code is useful.

And where is the diagram for your proposal?


In reply to David Scotson

Re: Direction of FRONTEND team

Damyon Wiese發表於

* Integrate a good 3rd party CSS compressor

 

This needs to be decided on. From my experiences with less - I don't mind it, but it has flaws:

* Extra tools/setup required to start development. 

* More barriers for web designers

* Error reporting is non-existent (recess / less bug AFAIK)

Less/Recess is the tool used by bootstrap - but there are others - e.g. SASS. Should we be choosing one over the other for all Moodle themes?

IMO - this decision should be up to the theme author and we don't have a strong enough reason to put this in core yet. The bootstrap theme uses less because that is what twitter uses and that makes sense. So lets keep it in that theme for now. A different theme author can use plain CSS, SASS, less or whatever they want. If we have nice well documented CSS patterns in core it makes it easier to use different frameworks. 

 

 

In reply to Damyon Wiese

Re: Direction of FRONTEND team

David Scotson發表於
I wasn't talking about LESS or other CSS pre-processors, I was talking about a minifer/compressor, namely the PHP port of YUI CSS compressor.

https://github.com/tubalmartin/YUI-CSS-compressor-PHP-port

These are very tricky bits of code, and Moodle currently has two homegrown ones, one of which has no tests and the other was still marked as experimental because it was breaking some code the last time I looked at it. We should just plug in that one as it's based on a very widely used methodology and it's got comprehensive unit tests.
In reply to David Scotson

Re: Direction of FRONTEND team

David Scotson發表於
But since you bring up LESS, I think the fact that we currently need to use LESS should be considered a bug, as it is basically a failure of Moodle's theme engine in not allowing us to control the HTML. Sufficient work on renderers could make this entirely unnecessary (though still sometimes useful for advanced themers) in time for 2.6.

I started exploring this in my Bootstrap Renderers theme (https://github.com/ds125v/moodle-theme_bootstrap_renderers). The basic lesson from that was that the exsting renderers aren't built to be overridden and need to be decomposed into standard components implmented by small, focused renderers.

If this work on renderers was not done then I have no idea how people would approach adopting any other framework (Zurb, Pure etc.) without first being forced to recreate the tedious and difficult mapping work that was done with LESS for Bootstrap using SASS or whatever tool the framework uses. For frameworks like Pure, which don't natively use such a tool, the work would all need to be done by hand.

For example, how would someone make the forms in Moodle look like Pure forms ( http://purecss.io/forms/ )?
In reply to David Scotson

Re: Direction of FRONTEND team

Urs Hunkler發表於
Core developers的相片
Another approach than to rewrite renderers to make classnames fit to different needs would be to implement a page postprocessing hook (Offered in several environments). If there where one it would be possible to change classnames with string replacements before the page is delivered to the browser. This approach is not ideal but I guess it would not take more time than to handle overridden renderers. These overriding tasks are quite time consuming in PHP.
In reply to David Scotson

Re: Direction of FRONTEND team

Damyon Wiese發表於

FYI:

The forms use a different type of renderer (Quickforms) that cannot be modified in a theme.

(MoodleQuickForm_Renderer in lib/formslib.php). 

 

In reply to Damyon Wiese

Re: Direction of FRONTEND team

Tim Hunt發表於
Core developers的相片 Documentation writers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 Plugin developers的相片

However, one possible project for the frontend team would be to modify formslib to generate all the HTML using a renderer (e.g. core_form_renderer) then themes could override it.

In reply to David Scotson

Re: Direction of FRONTEND team

Damyon Wiese發表於

The minifier sounds like a separate issue to me. If there is a specific bug in the current one we could look at fixing it or using an alternative, but I don't feel there is a gaping hole in functionality with what we have.

In reply to Damyon Wiese

Re: Direction of FRONTEND team

Damyon Wiese發表於

Thanks everyone for the discussion,

Martin has created a policy bug from this to clarify our position. Please comment on it if you see any major problems with the approach suggested here:

https://tracker.moodle.org/browse/MDL-40187

IMO it sounds like a good plan.

評比平均分數:Useful (1)
In reply to Damyon Wiese

Re: Direction of FRONTEND team

Tim Hunt發表於
Core developers的相片 Documentation writers的相片 Particularly helpful Moodlers的相片 Peer reviewers的相片 Plugin developers的相片

Some thought from me:

  1. Most important talk from my point of view is to get the element library into Moodle core, and expand it to be a tool for communication between themers and developers:
    1. When themers are developing a theme, then can see all the kinds of things they need to design, and can verify their theme does a good job.
    2. When developers are implementing new functionality, they can see standard UI elements that they should be trying to use to realise their functionality. (Or patterns, as Urs refers to, and many developers like design patterns in software architecture already.)
    3. If a developer cannot find a way to implement a new feature using standard elements, they could be encouraged to suggest new elements to add to the library. That provides a mechanism for engaging themers in a debate about the proposed new element that is slightly abstracted from the very specific problem the developer is trying to solve.
    4. Certainly, the integrators should insist that for any new features going into Moodle core, any new elements are added to the element library. 
  2. Once we have the element library, then it makes it much clearer what we mean when way say "Standardise Moodle's HTML, class names, and CSS", irrespective of which framework or theme we are using. This is a huge amount of work, but very important. The way to eat an elephant is one bite at a time, so the frontend team needs to start this soon, and keep going for the foreseeable future. (Poor elephant.)
  3. It does seem that new frameworks are still springing up, and no-one really knows what is best. If we can avoid fixing one one framework now, then that is better. Still, we have to work on something, and bootstrapbase is that thing at the moment, I suppose. It is useful if other people can try out other frameworks in parallel (as is happening), to prove we really have potential flexibility if we need it.

Overall, this is a really good an interesting discussion, can I join the rest of you in wishing the front-end team lots of luck with this. 微笑