Release Notes for w2ui 2.0

April 26, 2023
I am thrilled to present w2ui v2.0, a major release that's been two years in the making. A huge thank you goes to all the contributors who have worked relentlessly on updates, testing, documentation, and bug fixes to bring you the finest version of w2ui to date. Although the last major release in 2017 delivered a stable and well-performing product, the rapid evolution of the web has necessitated further innovation. In order to stay relevant and competitive, it is crucial that w2ui keeps pace with the ever-changing landscape of web technologies. By embracing the latest features, APIs, and approaches, we've ensured that w2ui remains on the cutting edge, providing our users with top-notch web technologies and performance enhancements.

Featured Demos

Summary of changes

  1. No External Dependencies.
    In the world of web development, we constantly strive for lean, efficient, and powerful code. That's why w2ui v2.0 has eliminated external dependencies! Although jQuery is an undeniably fantastic library, modern browsers now natively support many of its features. Moreover, some developers have adopted a new way of writing apps without direct DOM updates. Consequently, we've decided to remove the need for jQuery in w2ui v2.0. But don't worry, if you're still a die-hard jQuery fan, you can continue to use it alongside w2ui, just as you did before. Keep an eye out for my upcoming blog post, where I'll share the approach I took to eliminate the jQuery dependency.
  2. ES6 Classes and Modules.
    All components have been rewritten as ES6 classes and can be loaded as ES6 modules. This means, however, that only modern, evergreen browsers are supported (along with Safari 13+). For IE and older browsers, you will still need to use v1.5. This change ensures that the components do not pollute the global scope, making it easier to extend and add new features. Additionally, adopting ES6 modules allows for better code organization, facilitating the development and maintenance of the library. All demos have been updated to use this new syntax
  3. Use of New Syntax and APIs.
    The latest version of w2ui employs modern JavaScript features, such as arrow functions, promises, observers, spread operators, object destructuring, Object.assign, and more. This not only improves code readability and maintainability but also ensures that the library leverages the latest performance optimizations provided by modern browsers.
  4. Completely Rewritten Tooltips and Overlays.
    Say goodbye to the headaches of yesterday! Tooltips and overlays are now cool, sleek, and a breeze to work with. Although I initially considered using Popper (or the new Floater UI), I realized that integrating them seamlessly into w2ui would be a challenge. Instead, I've put in the hard work to create a custom solution that's both stylish and easy to use. As a result, Date, DateTime, Color Picker, and menu overlays have all been revamped, making your user experience smoother and more enjoyable than ever before. See Demos
  5. Strict CSP Settings.
    In today's digital world, security is of utmost importance. That's why w2ui v2.0 fully embraces Content Security Policies (CSP) by eliminating inline JavaScript. CSP is becoming more mainstream as it helps prevent cross-site scripting (XSS) and other code injection attacks. Since v1.5 relied on inline JS for events such as onClick, onMouseOver, etc., it was difficult to use it with strict CSP settings. Now, with w2ui v2.0, security is in your hands, as the library does not use inline JS by default. This ensures that your application is better protected against potential security threats. (Note: inline CSS is still heavily used, but it's generally not considered a significant security issue. Nonetheless, we'll continue to monitor best practices and make improvements as needed.)
  6. Better Support for use in Vue, React, and Angular.
    I envision w2ui as a set of components that can be used within any framework, and I have started git repositories to facilitate easier integration with popular libraries. While not all wrappers for popular libraries are written yet, work is ongoing.
  7. Improved Forms and Fields.
    In w2ui v2.0, forms have received a significant overhaul, evolving beyond the incremental improvements made in previous minor versions. They have been rewritten as classes, providing a more structured and maintainable codebase. Although forms may appear standard with limited UX flexibility when adding new records for CRUD operations, w2form and w2field offer exceptional adaptability. In my daily work, I consistently rely on these components and never feel the need to resort to plain HTML or seek out external libraries to bridge any gaps. For instance, auto-generated forms can be incredibly useful in scenarios where you need to create dynamic surveys or questionnaires. With w2ui's flexible forms, you can easily generate these forms based on data fetched from a server or a predefined set of questions. This eliminates the need to manually create and update the form layout every time there's a change in the questions or structure, saving time and effort. Additionally, w2ui forms integrate seamlessly with various data validation rules, ensuring that user input is accurate and reliable. With w2ui v2.0, building and maintaining complex forms becomes a breeze.
  8. Improved CSS for a Fresh, Modern Look & Feel.
    Let's face it, nobody wants their application to look like it's stuck in a time warp! That's why we've given w2ui v2.0 a design makeover that would make even the trendiest web designers nod in approval. Say goodbye to the 2017 vibes and hello to the sleek, stylish world of 2023. With more whitespace, cleaner lines, subtle animations, and refined color schemes, your application will strut its stuff down the digital runway like a true fashionista. So go ahead, let your app flaunt its newfound fabulousness with w2ui's updated CSS!
  9. New Features in All Components.
    Enhancements have been made to context messages, menus, overlays, notifications, i18n and localization, as well as expanded utilities and DOM manipulation components. All of these improvements are now built into a single w2ui library, streamlining the user experience and providing a comprehensive toolkit for developers.
If you are updating from 1.5 to 2.0, here is the migration guide, which is a live document. If you discover any tips or tricks, please drop me a line, and I will include them there.

Remaining wishlist

  1. Refactor the grid not to use HTML tables, instead adopting modern layout techniques such as CSS Grid or Flexbox for improved performance and flexibility.
  2. Remove Less in favor of CSS variables. Although I think I will wait until browsers support nested CSS rules.
  3. Create a theme roller for custom CSS, allowing users to easily customize the look and feel of their w2ui components.
  4. Write better UI/UX test coverage. I am also exploring various approaches to testing the UI/UX of a library like w2ui, ensuring that each component functions and appears as intended across different browsers and platforms.
Your feedback and contributions are always welcome as we continue to enhance and expand the capabilities of w2ui.

User Comments

Other Articles