Tag: JavaScript

JavaScript Frameworks

Posted on by doctorbobt

There are so many JavaScript frameworks to choose from that it is sometimes difficult to choose one that will best fit your needs. Developers want to select the framework that will make their development easier, more maintainable, and work well with users.

In addition, I think developers want to pick the framework that will look best on their resume or impress their peers. After all, we want to be seen as working with the latest and greatest framework. With what seems like a steady stream of new one from the JavaScript framework firehose, you don’t want to go with one that might be out of favor in a month or two. Put all of this together and you might end up with analysis paralysis and never go beyond your comfort zone.

“The greatest fear in the world is of the opinions of others. And the moment you are unafraid of the crowd you are no longer a sheep, you become a lion. A great roar arises in your heart, the roar of freedom.” ― Osho

With that in mind, I found “The Ultimate Guide to JavaScript Frameworks” to be an enlightening guide to help choose a JavaScript framework. I have worked with a couple of different frameworks and often wondered what the other frameworks did and why there are so many of them. This article will give you a quick introduction into the various frameworks so you can decide if one of them is a fit for your project. If nothing else, you will be educated enough to be able to contribute to a discussion a group of developers are having on which one is best.

You are probably familiar with the big three frameworks – React, Angular, and Vue. They are great frameworks and very popular. The chart below shows the downloads for these three frameworks in the past six months.

However, consider the framework Dojo for a moment. Yes, it’s just another framework, but it is unique in how it handles accessibility and internationalization. That might be something very useful for government, higher education, or enterprise application projects. It decouples the application from a particular or culture. Or maybe Inferno, which is designed to perform well on mobile devices. Currently, it’s server-side rendering is 5x faster than React, 3x faster than Angular 2, and 1.5x faster than Vue. Or maybe you need to build you own library to meet your needs. Then Picodom
is a library that can help with that.

The article reviews 54 different JavaScript frameworks. Just because “everyone” is using React, Angular, or some other popular framework doesn’t mean that you should too. Often a lesser used framework can make your development life a lot easier. This article is a great place to start looking at these other frameworks.

Dragula

Posted on by doctorbobt

Drag and drop is a feature websites often use to simplify selection of html elements or files. Typically, I usually make an element draggable, if I need an html element, and handle the drag start and drop events to achieve the effect. This can be done with straight JavaScript as this W3Schools example shows:

function allowDrop(ev) {
ev.preventDefault();
}function drag(ev) {
ev.dataTransfer.setData(“text”, ev.target.id);
}function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}

<div id=”div1″ ondrop=”drop(event)” ondragover=”allowDrop(event)”></div>

<img id=”drag1″ src=”img_logo.gif” draggable=”true” ondragstart=”drag(event)” width=”336″ height=”69″>

The main items to implement drag and drop are:

  • Set the draggable attribute to true so the img element can be dragged.
  • Set the dragstart event attribute on the img element to call the event handler.
  • Set the div element’s dragover and drop event attributes to call the appropriate event handler.

With these attributes setup, the img element can be dragged and dropped onto the div element.

The process starts when the user begins to drag the img which invokes the drag event function. This event handler saves the id of the element being dragged (i.e.; “drag1”) in the dataTransfer object property with a key of “text”. When the user has released the img over the div element, the drop event function is invoked. The drop event retrieves the id of the element being dragged from the dataTransfer object “text” property, then selects the element, and appends it to the div element. The dragover event function gives you control on how the cursor should appear when the dragged element is over the drop target but not dropped yet.

All in all, this is a pretty simple process to implement using just plain JavaScript. You can simplify this implementation quite a bit using jQuery. Another library called Dragula can also simplify this process without the jQuery library.

Dragula’s says it makes “drag and drop so simple it hurts”. It features:

  • Super easy to set up
  • No bloated dependencies
  • Figures out sort order on its own
  • A shadow where the item would be dropped offers visual feedback
  • Touch events!
  • Seamlessly handles clicks without any configuration

Once the library is referenced, you can use Dragula by simpling adding code as follows:

dragula(containers?, options?)

An example of a using dragula allowing for the drag and drop between two elements with the id’s left and right is shown below:

dragula([document.querySelector(‘#left’), document.querySelector(‘#right’)]);

While the standard implementation of drag and drop is simple enough, and while Dragula does make it easier, what I like about Dragula are the additional features it provides. There are events galore allowing you to handle just about any possible action that can occur during a drag and drop operations. You can have the drag and drop copy, move, or delete items as needed. Sort the resulting set of items dropped. Retain links on the dragged and dropped items. All easily setup in your code.

Here’s an example where we can move items between elements and set the CSS style to highlight the dropped item:

dragula([document.getElementById(left), document.getElementById(right)])
.on(‘drag’, function (el) {
el.className = el.className.replace(‘ex-moved’, ”);
}).on(‘drop’, function (el) {
el.className += ‘ ex-moved’;
}).on(‘over’, function (el, container) {
container.className += ‘ ex-over’;
}).on(‘out’, function (el, container) {
container.className = container.className.replace(‘ex-over’, ”);
});

There’s a lot more to explore with Dragula. Check out their demo. You can download Dragula and read all of the options it provides at github.