Best practice to create Custom UI framework in JavaScript [closed]

Question

I want to create a custom UI framework in JavaScript for web applications (like Google Docs ui) (do not confuse with web application that deploy using languages like PHP, Python, etc.). However, after reading several books about web development, I understand that the best website is layered as follows:

1. Structure in HTML
2. Presentation in CSS
3. Behaviour in JavaScript

So there are several approaches to creating my own HTML document and control it in JavaScript. However in this approach HTML and CSS will be mixed, like in case of extJS UI. I am confused now, and I need some answers from experienced developers on how to write this kind of framework.

• If HTML, CSS, and JavaScript is mixed.
  • What was advantages?
  • What was disadvantages?
• Is there are other methods?
• What was the usual type of creating UI frameworks?

Answer 1

I apologize that this answer is extremely long and at times may seem somewhat off-topic, but please keep in mind that the question was not very specific. If it is improved, or made less general, then I will gladly remove the superfluous parts, but until then, just bear with me. This is somewhat of a compilation of the other answers here, in addition to my own thoughts and research. Hopefully my ramblings will be at least somewhat helpful for answering this question.

General Tips for Frameworks

Frameworks are a ton of work, so don't spend all of that time for nothing. Work Smarter, Not Harder. In general, you should remember these things when creating a framework:

1. Don't Reinvent the wheel: There are tons of great frameworks out there, and if you create a framework that does the exact same thing as another framework, you've wasted a ton of your time. Of course, understanding what goes on inside another library is a great way to make your own library better. Quoting @ShadowScripter, "knowledge -> innovation." However, don't try to rewrite jQuery by yourself. :)
2. Solve a Problem: All good frameworks (and programs) start with a problem they are trying to solve, then design an elegant solution to solve this problem. So don't just start writing code to "create a custom UI framework," but rather come up with a specific problem you want to solve, or something you want to make easier. jQuery makes selecting and manipulating the DOM easier. Modernizr helps developers identify the features supported by a browser. Knowing the purpose of your framework will make it more worthwhile, and may even give it a chance of becoming popular.
3. Fork, don't rewrite: If the problem you aim to solve is already partially solved by another framework, then fork that framework and modify it to fully fit your needs. There's no shame in building of the work of others.
4. Optimize and Test: This is kind of a no-brainer, but before publishing version 1.0 on your website, test every single part of the function, under every single possible scenario, to make sure it won't crash and burn in production. Also, another no-brainer, minify your code (after testing) for performance benefits.
5. DRY and KISS: Don't repeat yourself, and keep it simple, stupid. Pretty self-explanatory.
6. Stick to Stable: (This is mostly my personal opinion) Unless you're trying to create a framework specifically targetted to HTML5 in Chrome 31, using experimental features and unstable code will make your framework slower, uncompatible with older browsers, and harder to develop with.
7. Open Source: (Another of my opinions) It takes years for huge companies like Google with thousands of dollars invested to create frameworks (e.g. AngularJS) so it is an excellent idea to make your source openly available. Having a community of developers contributing to your project will make development faster, and will make the end product faster, bug-free, and better all around. Of course, if you're going to sell it, that's another story...

For more information about best practices when making libraries, take a look at these links:

• Javascript Library Design
• Javascript Module Pattern: In Depth
• Best Practices in Javascript Library Design
• Building a Javascript Library

---

Types of Frameworks

The first thing you need to think about, as mentioned above, is what functionality you want your framework to provide. Here are is the list of types of frameworks/libraries (thanks to @prong for the link). For a much more comprehensive list, see jster, which has 1478 libraries, put into 8 categories, each with several subcategories.

• DOM (manipulation) related
• GUI-related (Widget libraries)
• Graphical/Visualization (Canvas or SVG related)
• Web-application related (MVC, MVVM, or otherwise)
• Pure Javascript/AJAX
• Template Systems
• Unit Testing
• Other

As you can see from the link, there are already dozens of libraries and frameworks in each of these categories, so there's not exactly much room for something new. That being said, I don't want to discourage you- who knows, you could create the next bootstrap or jQuery. So, here are some resources about each type of framework.

Note: you can't say that any type is better than the others, they simply are designed for different goals. It's like comparing apples and oranges.

DOM (manipulation) related
These types of libraries are designed to interact with, modify, and control the DOM of a website. Here are just a few of the things they do:

• Select Elements in the DOM ($("div#id .class"))
• Add/Remove Elements in the DOM ($("div#id .class").remove())
• Edit Attributes of Elements in the DOM ($(div#id .class).height("30px"))
• Edit CSS of Elements in the DOM ($(div#id .class).css("property","value"))
• Add listeners for various events taking place in the DOM ($(div#id .class).click(callback))

The most notable of these, of course, is jQuery, and it has one of the largest user bases of any Javascript library. However, it is by no means perfect, and if your library wants to compete, the best thing to do would be to make it excel in the areas that jQuery fails- speed, fragmentation, and "spaghetti" code. (The last two aren't completely in your control, but there are certainly things that you can do to make it easier for users to use the most update version, and keep their code maintainable)

GUI-related (Widget libraries) I think that this may be the type of framework you're looking to create. These types of libraries provide widgets (datepickers, accordians, sliders, tabs, etc.), interactions (drag, drop, sort, etc.) and effects (show, hide, animations, etc.). For these, people are looking for quantity- the best frameworks out there have several useful widgets/effects that work well. This is one case where it's "the more, the merrier," of course, if it works properly.

Graphical/Visualization (Canvas or SVG related) The purpose of these libraries is to control animations on the page, specifically on an HTML5 Canvas. These feature animations and sprites for games, interactive charts, and other animations. Again, successful graphical libraries have many, many sprites/animations. For example kineticjs has over 20 different sprites available. However, make sure that quantity does not compromise performance and overall quality.

Web-application related (MVC, MVVM, or otherwise)
Basically, the idea is to provide a layout for the users to put their code in, typically separating the model (data) from the view(what the user sees), with a small controller to provide an interface between these two. This is known as MVC. While it is by no means the only software pattern to base a framework off of, it has become quite popular recently, as it makes development much easier (that's why Rails is so popular).

Pure Javascript- AJAX This should really be two categories. The first, AJAX libraries, are often paired with a server side library and/or database (though not always) and are designed to make connections with a server and get data asynchronously. The second, "Pure Javascript" are designed to make Javascript easier to program in, as a language, provide helpful functions and programming constructs.

Template Systems This might also be the type of framework you're looking to create. The idea is to provide components that developers can use. There's a thin line between Template Frameworks and Widget Frameworks (which twitter bootstrap, one of the most popular template frameworks, crosses a lot). While widget frameworks just give a bunch of little elements that can be put in a site, template frameworks give structure to a website (e.g. responsive columns), in addition to making it look good.

Unit Testing This type of framework is designed to let developers test, or systematically ensure the correctness, of their code. Pretty boring, but also really useful.

Other This type of framework is for really specific purposes that don't really fit into any of these other categories. For example, MathQuill is designed for rendering math interactively in web pages. It doesn't really fit into any other category. However, these types of frameworks aren't bad or useless, they're just unique. A perfect example is Modernizr, a library for detecting a browser's support for features. While it doesn't really have any direct competitors, can't be put into any of the other categories, and does a very small task, it works very well, and is very popular as a result.

More Types
There are a bunch of other types of libraries. Below are the categories (I'm not listing subcategories because that would take half an hour to copy down) that JSter puts their 1478 libraries into:

• Essentials
• UI
• Multimedia
• Graphics
• Data
• Development
• Utilities
• Applications

Answer 2

It depends on what you really want. The first distinction that needs to be made is between a Javascript UI framework (which provides structure to the app), an HTML UI Framework (Presentation) and Widget Libs.

Javascript Frameworks such as backbone, angular, ember, and knockout provide MVC-like structure to the app.

UI frameworks such as YUI, bootstrap, and Foundation provide a consistent HTML and CSS base.

Widget Libraries such as jQuery UI, Fuel UX, and Kendo UI provide ready made widgets.

There are also fully-fledged frameworks which provide things across the board, such as Google Closure tools, Dojo with Dijit.

This Wikipedia list pretty much sums it up, and here is the comparison.

In order to find the best way to create a framework, first ask this question: Can any of the above frameworks/libraries solve all or some of the problems/requirements I have?

If something solves all the problems, you can use it right away.

If something solves your problem partially, you can start by extending/forking that project/framework.

Follow DRY and KISS rules. Only solve a problem which nobody has solved as of now.