How difficult is it to create a JavaScript framework?

Posted 2020-08-11

分享来自 quora 的一篇文章 https://www.quora.com/How-difficult-is-it-to-create-a-JavaScript-framework

 

This mostly depends on your JavaScript skills, but as you said, that you are using a lot of JavaScript it won‘t be that difficult...

There are two different words:
Library: Is a script, that supports you by completing some task(s)
Framework: Takes over everything and helps you to build the application from the first line of code till it is finished and creates lifecycles etc.

Creating the javascript Framework itself isn‘t that a difficult task. A much more difficult task though, is the design, you have to do before you actually start building the Framework.

Let‘s think, what would  the perfect JavaScript Framework be like?

• Easy to use
• Includes a router using the new html5 pushState function
• Has it‘s own easy-to-use template engine, that also can load templates from the server
• Loads models easily automated from the server when requested
• Makes it easy to modularize the Controllers, that are used
• Has it‘s own Message Bus System to easily trigger events (as well Events of the Framework as Events triggered by the Framework user)
• Gives easy access to Cookie Setting and Server Communication (including Sockets)
• Can save models on the client side with HTML5 database and filesystem features
• Caches some server requests if told so (or even automated with some intelligent algorithm, to check whether a good idea to cache or not)
• Makes it as easy as possible to create One-Page-Apps
• Easy to use together with the php Laravel Framework or the Node.js Express Framework (sorry Ruby, i don‘t like you :) )
• Easily extendable
• Has a Life cycle, so that you are able to complete tasks before/after the Page Rendering/Model Loading/Unload etc.
• Open Source
• Compatible with most important JS libraries
• Well documented (the most important thing at all and yes i know writing documentations is quite boring :) )

There are two approaches for creating any kind of apps:
The Model View Controller Approach(MVC):
(Source: http://www.wikipedia.de)
This Approach consist of Model Objects, that stores all the data of the Application, Views that define how the data should be viewed and Controllers, which - yes you guess was right - Controllers the Views and Models, and define, when which function has to be executed.
An example for this type would be backbone.js (Although Backbone.js defines itself much more as a library than a framework)
And there is the Model View ViewModel Approach (MVVM):

(Source: http://www.wikipedia.de)
Here you have Data Bindings: For example you can bind a variable to a special <p> tag. Every time the Variable get‘s updated the paragraph will be updated as well.

I personally prefer the MVC approach, as it makes it a lot easier to create One-Page-Apps, as you don‘t simply bind your variables to one element in the HTML-Source, which makes it possible to have different UX types in your main content a lot easier.

Now here I will give you some tips for the design&building process:

• Only use one global namespace for your whole Framework, this also makes it easier to be compatible with other libraries
• Draw up all your objects on a paper (yes real paper it still exists and is a pretty good option for this), so you always have an overview about what classes you have, which ones still are missing etc.
• Pack the whole thing in a require.js module
• Use other libraries as a base for your framework (If it is about being productive and not doing it for the craic you don‘t have to reinvent the wheel)
• Always have a list of bugs and new features next to you, and mix the different things you still have to do (don‘t just fix bugs for one day, that could be too boring and will make you loose the enthusiasm)
• NEVER GIVE UP!

There are a lot of frameworks out there, but if you have the time to build your own you should do it - you will learn a lot if you do so.
And the more fun you have building it the less hard the work it is going to be for you.
Alright I hope I was able to help you out, if you have further questions don‘t bother to ask :)