mybb 2.0 dev post #3

[Guest Euan T]

It’s that time again, time for another MyBB 2.0 dev blog! This post is the third in a series of development update posts regarding MyBB 2.0. Currently in pre-alpha, MyBB 2.0 is the long awaited upcoming major version of the open source MyBB forum software. We’ll be posting regular updates (we promise!) in regards to the development to keep you all updated. The development team have been hard at work since our last dev post, adding new features and polishing existing functionality. This post will explore some of these new features and highlight our approach to the development of the system.

 

 

New approach to feature suggestions

 

 

Some of you who frequent our community forums may have noticed the newly reorganised MyBB 2.0 Development forum. The new structure makes it far easier to suggest new features and enhancements, and to track the currently confirmed and planned features we are implementing. Previously, the suggestions forum has been hectic and unorganised with no clear structure. I hope you agree that this more structured approach is for the better for all of us, but please do suggest any additional changes that you think might help.

 

Some Development Background

 

 

We’ve been trying to provide some background on how we’re actually developing MyBB 2.0 as part of this series rather than just using it to look at features and such. In this post, I’d like to talk about how we’re working on the front-end of the software – namely the CSS stylesheets and the JavaScript.

 

During the development stages for 2.0, we’re utilising Sass to develop the core theme. Sass brings a whole lot more flexibility to the table, and is allowing us to rapidly work on the style and make use of useful features such as CSS variables for colours and mixing to provide common rule sets. We chose Sass due to its easy to learn syntax and rich feature set, though we also considered alternatives such as LESS.

 

We’re also trying to follow the BEM syntax for the core theme, in an effort to make the CSS classes used in the core much more understandable to other developers and to make the reuse of useful classes far easier.

 

We’re also currently investigating how easy it would be to provide the use of Sass and LESS to theme authors straight from the Admin Control Panel. This would give theme developers a great deal more flexibility, and would see Sass or LESS being used to create a theme, with the compiled CSS served up to end users.

 

Our approach to JavaScript at the moment still uses raw JavaScript (rather than a language such as CoffeeScript or TypeScript that compiles to JavaScript), though all JavaScript components are being written as separate modules under a global “MyBB” namespace. We’re also still making use of jQuery, though the version has been bumped to version 2.1.4 as of the time of writing.

 

Here’s a taster of this new approach to writing our JavaScript, as seen in our MyBB.Spinner module:

 

 

(function ($, window) {

window.MyBB = window.MyBB || {};

 

window.MyBB.Spinner = {

inProgresses: 0,

add: function () {

this.inProgresses++;

if (this.inProgresses == 1) {

$("#spinner").show();

}

},

remove: function () {

this.inProgresses--;

if (this.inProgresses == 0) {

$("#spinner").hide();

}

}

}

})

(jQuery, window);

 

 

In order to aid the process of compiling our SASS files and combining our JavaScript modules, we’re making use of the gulp.js build system. This system compiles our SASS stylesheets into CSS, saves them and then minifies then into “*.min.css” files for use in the main theme. It also combines all of the JavaScript files (including vendor scripts such as jQuery) and minifies them too, along with optimising all of the images used by the theme.

 

This whole process is allowing for a rapid iteration of the front-end development and design of MyBB 2.0, and we look forward to bringing some of this power to theme developers and site owners. We’re currently intending to have an Admin Control Panel area under the Templates and Styles module to allow the management of JavaScript files rather than requiring manual template edits. This, combined with the automatic minifying of source files and the use of CDNs being made far easier should offer administrators much more flexibility and provide a welcome speed boat to the loading of forum pages.

 

Private Conversations

 

 

MyBB has long had the ability to send other members Private Messages, which are hidden from public view. This system has become rather restrictive in recent times though, with the PM system only showing the last message and allowing only two participants. We therefore decided for MyBB 2.0 to overhaul this system to act as a much more powerful Conversation based system.

 

This new system allows for multiple participants within a conversation, and a fully threaded approach to messages. This allows for much greater communications between users in private outside of the usual forums.

 

http://www.forum-forum.com/data/MetaMirrorCache/58acad957105b0147fc630128cbd2c67.png

A sample Private Conversation, with several participants taking part.

 

Redesigned User Control Panel

 

 

The User Control Panel in MyBB is the one-stop place for users to manage their details, update their signature and avatar, edit their preferences and more. In MyBB 2.0, it has received a significant redesign and overhaul in order to simplify the way things are presented to the user.

 

The Control Panel maintains its sidebar (and the easy extensibility it provides for plugin developers), but trims down the default entries by combining items that may be combined. In addition, the section to manage your Private Messages has been removed, and is instead accessible via the conversations management page and the conversations drop-down menu found in the header of all pages.

 

Most of a user’s details are configured via a single “Profile” page within the new User Control Panel. This page also shows all custom user profile fields configured by the board administrator, allowing users to fill in all of their details in one single easily accessible location.

 

http://www.forum-forum.com/data/MetaMirrorCache/53cfbeeea40ad896b516ac9ea408853f.png

The new User Control Panel, showing the Profile management page. Note that almost all actions related to your user account are managed via this page rather than being spread across several.

 

http://www.forum-forum.com/data/MetaMirrorCache/c8660542adc63ab88a5896418e55f99d.png

Some of the administrator configured custom profile fields. Fields can be grouped together and shown under different headings, as well as having validation rules attached, being set to be required and having several different input types.

 

 

Custom profile fields have been greatly enhanced in MyBB 2.0 and should replace the functionality provided by many plugins used with MyBB 1.8 today. We’re looking forward to covering this additional functionality in more depth in future blog posts.

 

Wrapping Up

 

 

Well, that’s it for this month’s MyBB 2.0 development progress post. As you can hopefully see, the team has been hard at work and listening to user feedback. If you have any suggestions, post them in a comment or in the 2.0 suggestion forum, but please do remember to follow the new guidelines for posting suggestions! We still have a lot more to both announce and to show, so keep your eyes tuned to the blog for future updates.

 

http://www.forum-forum.com/data/MetaMirrorCache/4cd88d040e6ea2487b9f39598b4c73a1._.png http://www.forum-forum.com/data/MetaMirrorCache/96810330211c858b8b9ff25cd765bbd3.gif

 

Continue reading...