Update of October 8, 2020
With the release of Webix 8.0 the original JavaScript Gantt Chart component has become available. Now Webix users can enjoy the native Webix Gantt. This component is created according to the canons of the Webix framework and it is intended for the integration into any business applications regardless of their architecture and system platform.
You can download the free version of Gantt by following this link. You can find more detailed information on the Gantt home page, on the JS Gantt documentation page or in the Gantt source code sample catalog.
Today I would like to let the GanttPRO team showcase their online project-management tool that, among other tools, is built with Webix. In March 2015 they hit the market and now can boast the 200.000-audience.
That’s not an ordinary showcase. We had a chance to speak with GanttPRO developers and question them about their experience in working with Webix library. You can find their ultimate and honest answers in the below article.
What is GanttPRO?
GanttPRO is an online Gantt chart software for scheduling projects and controlling the workflow. It is aimed at managers who would like to organize the work of their team in a clear and wise manner. GanttPRO allows creating projects and divide them into tasks and subtasks, manage durations and tune the collaboration between team members.
The application is simple and intuitive for end users. It is the real alternative to the Microsoft Project tool for those who want to go online with their task management work.
Building bricks
Being the core of the application, the Gantt chart is made with an interactive DHTMLX Gantt component. At the same time, the whole working environment for the GanttPRO application is implemented in Webix.
The application features the truly rich UI. It includes numerous lists and tables, controls and forms, windows and menus that are required for powerful project management. At first, the team styled the software with the Material design skin, but have moved to their own one lately.
In addition, the GanntPRO developers were among the early users of Webix Jet micro-framework that have proven its ability in structuring the application code well. Now it is the recommended MV* framework for creating complex Webix-based projects.
Why did you choose Webix?
Tells Dmitry Dudin, the team’s chief technical officer:
“We did not have a long-term planning at the very beginning. First and foremost, we wanted to create a fully working draft with minimum effort. Webix appeared to be very easy to learn and use, and their support team has helped us a lot.
We liked Webix for the safe and time-savvy prototyping pattern it offers. You can easily move code blocks of layout parts within the application. So, if the design changes in the process of development, you can quickly adjust the code up to it.
I should say, that if you don’t need custom things, Webix rocks. There are a lot of cross-browser widgets and controls that require little settings. For instance, in addition to the main app interface we have created our own admin area, and it took us only 5 days! The powerful Datatable widget has saved us a lot of time and money.”
What Webix benefits helped you in development?
Tells Sergey Kunitskiy, software engineer:
“We used Webix Datatable for everything. I’m not exaggerating or joking here, as it the best widget among the library’s data-management tools. Thanks to its lazy loading functionality, the Datatable appends only visible items to DOM, which makes it super fast and reliable.
Webix Jet has helped us a lot to structure the project code. The global event bus in the Jet, alongside with Webix event system for widgets and collections, allows maintaining communication between application parts with ease.
Still, it would be simpler to reach the advanced level in Webix Jet if the documentation was a bit more detailed”.
Tells Mikhail Khlud, software engineer:
“Webix offers an extremely intuitive syntax. The library’s built-in interface for working with Promise objects is just great. Among visual tools I can single out the Custom Scroll for its cute design.
Also, I should point to the Webix Template widget. With its help I can create an HTML layout within Webix UI and assign custom behaviour to it. For instance, we’ve implemented the commenting system in the GanttPRO totally with Webix templates.”
Which challenges did you face while developing?
Tells Sergey Kunitskiy, software engineer:
“The toughest issue we had was connected with the application look-and-feel. Styling up to design was quite a challenge for us due to skin-related JS settings used in Webix sizing logic. Some of them were configurable, but there were a lot of hard-coded parameters as well.
Luckily, Webix team met our wishes and added a lot of configuration settings (in version 4.2 – Olga Kustova), and now we have a fully-featured skin, and the community gained a lot of customization possibilities.
During development, we needed quite specific widgets for our project. It was great to find out that, being an open system, Webix offers a clear way to create custom widgets on the base of the existing widgets and modules.
So, we have implemented some custom controls for the GanttPRO application, namely:
The DateRange Picker control with the possibility to define custom working hours and days. It is based on the ready made Webix Calendar and lets the managers set any schedule:
Also, we have styled the Toggle buttons in a specific way:
And, of course, the side menu. We did the trick of combining Webix Accordion and List widgets into a smooth animated menu.“
All custom widgets are built with Webix public API and the technique is documented and accessible to everyone. By the way, the attentive blog readers could have spotted the possible implementation in the Playing the Accordion article last year.
But let us listen to another opinion now. Tells Mikhail Khlud, software engineer:
“Webix is a great tool for UI development, but we understand that there’s no universal tool in the world. Sometimes we had to get down to Earth and implement native HTML/Javascript solutions. It’s great that Webix offers cross-browser HTML helpers for working with DOM out of the package.
Webix is supplied with extensive documentation and a great number of demos, but in the earlier stage we had to enter the debug mode of the library to monitor what and why is going on. The debug tools are worthy even for advanced developers as they save time a lot.”
What can you advise developers working with Webix?
The GanttPRO team piled up some tips for developers:
- Use DataTable. Always (joke). It’s great (I’m serious)
- Learn Webix Jet. It eats up all spaghetti in your code.
- Pay attention to Webix promises, Date and localization helpers
- Find the “webix_debug.js” file in the package. Learn its useful goodies to become the master of your app.
End of the line
The two years of elaborate work led the GanttPRO team to a useful and stable application with a single-page layout and cool interface. It has won the hearts of many project managers all around and became the leading tool in its segment. Doesn’t it sound like a dream for any dev team?
We are happy that Webix clients grow with us and thank the GanttPRO team for sharing their experience.
The Webix library grows itself bringing new possibilities to the developer community with each new release. So stay tuned for the updates, involve into forum discussions and feel free to make suggestions that may benefit a lot of Webix-minded people.
Also, if you have the real project based on Webix, want to share it and highlight your company and product in our blog – you are always welcome!
