Oh, and I’ve been banned from Reddit.
What are frameworks & libraries?
To my surprise, my previous article went viral on Reddit and I was blown away with the response and diverse feedback on the discussion comments. I woke up in the morning to see there where over a hundred comments under the link I have submitted. At first it was a shock to read the first few comments (a lot of them were criticism), but it was an interesting discussion. There was a huge argument between developers who agreed or disagreed with my article.
This article is also a response to the previous one, and I have some more thoughts to share before we get started. If you want to get to the gist of the article, you can go ahead and skip the following part.
The statistics on Medium blew up (see image below), which was unexpected since I’ve just recently started writing here. What I didn’t expect the most is how different readers perceived and interpreted my writing. This made me realize that if I’m not thorough on the message I’m trying to convey, the message may be vague and be misunderstood. I do admit that maybe I went too far, too fast with the article, prior to showing what frameworks and libraries actually are; how we use them, and why are they useful to us web developers. I had only touched the subject briefly in my first article.
So instead of replying to all the comments, I wanted to amend my mistake of not being clear by going into more detail on the subject of matter. Unfortunately I received an email later that day that I have been banned from posting on WebDev and startups. I was not aware that posting your own posts violates their policy of “self-promoting”. Being still new on Reddit, I only wanted to share my post with others to exchange my knowledge and get proper feedback. Well, feedback I did get, and I’ve learned so much from this fast, yet important experience.
Since now I can’t even post this article to share what I really meant to say, I would appreciate if someone can post it for me instead (you can let us all know by leaving a response below).
I’m really just getting started with writing and sharing my expertise and knowledge on a subject I enjoy doing everyday. Now I realize how important it is to be as clear as possible, first and foremost in the introduction of the article. This is also an important lesson I have learned from this mistake.
Somehow, from what I’ve read from the comments, a lot thought that I wanted to conclude that you should create your own full-fledged framework for each individual website. It got to the point were they even made me think if I have forgotten what the term framework actually means. I don’t understand, maybe it’s me, or maybe I am right in saying that a lot of developers today only see web development through the use of frameworks and libraries. Building a website (such as a simple portfolio page), doesn’t require you to custom built a framework. It’s just a static page that can easily be maintained even by a junior developer! Here is the discussion link from Reddit.
I was always eager to share my knowledge that could be useful or helpful to others, to get them up to speed, and immediately reach the same level that took me years to reach and understand. I never felt selfish or egoistic, and I always liked to help my friends. I believe that there are different ways (and right tactics), which you can use to teach and help others understand the subject better and clearer. As I had realized — from friends and people’s feedback — that I can turn a complex subject into a simple and easily understandable context. I knew that I had to reach a respectable level of professionalism before I could start teaching others online. I know my english may not be perfect, as this is not my native language. I’m trying to be as clear as possible so that you can understand the core subjects and help you get started. This is also the reason why I want to write this book. I really believe that there is a better way to introduce and welcome newcomers to the web development community, and hopefully this book will do it’s best to get you excited and motivated to get started. I want to help others understand the power of web development, how easy it is to get started, and how much you can achieve by having an online presence.
In the end I was quite happy with all the feedback and criticism. It taught me a lot, and made this subject even clearer to me, and hopefully to the rest of the web development community. So let’s go through this together one more time, and discuss some of the comments and thoughts from the perspective of other developers.
What I really meant about building a website from scratch
“I am not shocked at all that redditors ridicule this guy for not using frameworks. Apparently they aren’t aware that all the web is based on specifications which, essentially, is one big framework. Unfortunately for them, it requires the ability to program and think, a thing redditors are loathe to do while living under the umbrella of “I don’t have time” and mantras “Don’t reinvent the wheel, other people’s code is tested and better,” and so on.
Then their favorite framework/library gets dissed in three years and they are no longer in the business.”
This is a great comment and its exactly what I wanted to point out in my previous article. I want to discuss this further here. Let’s be clear, there is nothing wrong with becoming an expert on a specific library or framework, especially if this is used on multiple products you service or develop. What you need to know is to not just focus on learning how to code using only the methods found in frameworks and libraries. Frameworks and libraries are built by the native web languages themselves — HTML, CSS, and JavaScript. Having a strong knowledge of these languages first, is what helps to keep pragmatically learning and moving ahead. Frameworks and libraries are becoming a periodical craze with short-lived popularity, until a new one shows up next year with a better implementation, more lightweight, better performance, and increased functionality. Companies start to scratch their heads to see which one to choose or upgrade for. First it was jQuery, then we had AngularJS, then there was React, now we have Vue.js, and the list goes on. This will be ongoing, the same as other general products which are released on a yearly basis. Learn the real code that makes the basis of web development. Then go ahead and familiarize yourself with the available frameworks or libraries.
Introduction
I will first discuss what Frameworks, and libraries are, the difference between them, and how they can help us in web development. I will try to be as clear as possible about their use, and refer to case scenarios of when it is most appropriate to use them. Hopefully this will make you understand better what I meant with my previous article.
Side note — This is not a technical view explained in detail. I tried to keep it as simple as possible for you to grasp the idea of what frameworks and libraries really are.
What are Frameworks?
Or in this case, what is a front-end framework? A front-end framework (such as Bootstrap) is a package of files that provides the web developer with tools to easily and quickly build complex websites. It normally provides “human language” like commands to quickly reach a particular design or — hence the word — framework with a minimal effort. A framework is generally also integrated with other libraries and plugins that would continue to ease the process of complex functionalities. For instance, here is a simple example code that would put an element to the right side of the screen:
Using Bootstrap Framework:
<div class="pull-right"></div>
Using inline CSS:
<div style="float: right;"></div>
For this example I submitted the CSS directly inside the HTML <div> element. In common practice we submit styles inside a separate stylesheet (such as main.css), and call it using a link inside the <head> tag. Frameworks work in similar ways. These stylesheets we call have pre-built classes with similar functionality, but the developer doesn’t necessarily need to learn how to write the code in pure CSS. You can just learn the frameworks’ CSS classes or components, and start developing your website from a ready made template in no time.
Why are they used?
Frameworks provide you with great tools to develop a complete website in a short period of time. They are commonly used by companies, freelancers, and large complex web applications. They provide us with guidelines and easy to follow documentations. Once you get familiar with the framework’s environment, you realize how easier and faster it gets to complete a website. Companies can easily have different developers maintain a huge and complex website, since the code is standard for the framework, and not created by the individual developer.
When should we use them?
- If you are a big team, or collaborating with other developers, you can maintain a common code structure between one another. It also helps keeping the website adaptable and understandable for newcomers.
- You are a freelancer and want to quickly reach a particular design with minimal effort, to meet deadlines and take on new projects sooner.
Advantages
- Quickly built websites
- Provides a good starting ground for beginners to build their first website (depending on the complexity of the framework)
- Maintainable and tested code
- Great support (depending on how popular the framework is)
Disadvantages
- Adds unnecessary weight (extra code) to the website
- Upgrades, improvements, and fixes depend upon the community or company that made the framework
- Sometimes extra code needs to be written to override similar functionalities
- The framework might lose popularity, and all your knowledge becomes obsolete
What are Libraries?
Front-end libraries are built using JavaScript. Libraries (such as jQuery) facilitates the process of complex functionality into simple one-line code commands. Libraries are made up of different JavaScript functions that combine together frequently used methods, to ease the process of manipulating and alter the DOM (Document Object Model). Here is one example that would change a class of an element:
Using jQuery:
$('#container').removeClass('hidden').addClass('active');
Using vanilla JavaScript:
var container = document.getElementById('container'); // Fetch element
container.classList.remove('hidden'); // Remove class
container.classList.add('active'); // Add class
As you can see in the example above, with jQuery you can achieve this functionality easily, as the library provides the developer with human readable code. Although this example seems really simple, such libraries are more powerful, especially with handling asynchronous JavaScript requests to the server, or manipulating website data in real-time.
Why are they used?
As mentioned above, libraries are often used to facilitate the process of complex functionality. They make use of functions and classes, so that you — as a developer — do not need to write complex code or algorithms to achieve a particular functionality.
When should we use them?
Libraries are commonly used if the website or web application to be built, requires a lot of complex coding and intricate functionality. If your website will make use of modal (popup) windows, custom date-pickers, AJAX requests or asynchronous loading, DOM manipulation and more, then it might be better to use a ready made library. Although, keep in mind that most of the functions I just mentioned can always be achieved using vanilla JavaScript with a little extra effort, and some online research.
Advantages
- Turns complex functions into simple, easy to understand commands or queries.
- Reach specifications using less effort and reduced development time
- Code is generally tested by the community and has wide browser support
Disadvantages
- Functionality may still be limited
- File requests on libraries are heavy (depending on the file size)
- Updating your library might break your previous functionality
Should I use both?
This really depends on which framework or library you’re opting to use. Most of the frameworks come bundled with libraries to continue ease the process of building websites and implement features. But these are not always required, you can still opt for a pure framework package, and further ahead attach other libraries or plugins that you might need.
On the other hand, libraries are generally built to be used as a stand-alone feature. Some libraries are specifically built for a particular functionality, these are usually lightweight, and can be of great service since they are tested and well built. I do occasionally adopt small libraries — such as smooth scrolling — as long as they are written in pure (vanilla) JavaScript, since these are commonly optimized for great performance. Other small libraries may be built upon other libraries (such as jQuery). This is fine as long as you are already using the “main” library. But don’t include one huge library for the sake of a single feature. This is bad practice and you should always keep in mind the size of the whole package (all website files that will be requested from the browser).
Closing thoughts
Why do I mention libraries and frameworks together?
Straight answer — they both facilitate complex processes into easy to use functions and classes. Most of the time you will notice that they are frequently used together. Some frameworks also require libraries to work. They both add extra weight to your website. Keep in mind that although you will be writing a lot less code, in reality you have a bunch of other files to request and download. This is not a good approach, especially nowadays when millions of mobile devices are spreading in everyone’s pockets. Check my previous articles if you want to learn why performance is important, and why I think that a lot of developers are lagging behind.
Some comments worth mentioning about my previous article
“This was a good article, it’s just missing the caveats. Don’t do this in teams, on massive projects, on security sensitive projects, and several more, but from scratch has it’s place.”
I agree, as we discussed above, both approaches have their own advantages and disadvantages.
“I want to see a rough outline of what “from scratch” looks like. The article is written so vaguely that I wouldn’t be surprised if he’s using a framework and doesn’t realize it.”
When I say a website, I really meant just a simple website. I never mentioned in any part of the article that you should build your own framework from scratch. But I do understand I could have been more clear.
“…there is no point in reinventing the wheel”
No comment on this one… (some really did go overboard with the subject).
“Anybody who recommends everyone should write their own frameworks from scratch has never had to maintain one in a professional setting, especially over time.”
Again, I’m starting to think that a lot of people in that community just read the comments and continue with the argument (maybe for the sake of increasing their karma).
Easily find bugs, performance hick-ups, and design issues — “The trickiest performance bottlenecks can take days, if not weeks, to debug. If you’re on an aggressive schedule, you will not want to spend tons of time debugging hard problems.”
You do have a point here. But that’s why I made it clear to make it a habit to write line comments, and document your code during the time of development.
Conclusion
There are tons of libraries and frameworks to choose from. Seeing so many options makes you wonder if you’ll make the right decision or not. It starts to seem difficult and stressful to see all these different technologies and available techniques. My suggestion, of course, would be to go with the languages that actually make all of these frameworks and libraries possible: HTML, CSS, and JavaScript. This is were you should get started. Once you understand how these work together, you can start to understand how frameworks and libraries work. Then you would be able to create the functions you need yourself. This is what you should keep looking forward to, if you want to become a great web developer.
I can’t emphasise this enough. Keep in mind that web development is not something that you should be afraid of. Don’t let other web developers scare you from getting started with all these mind blogging names and technologies. My goal here is to try and bring some light and show you the right way of getting started. HTML, CSS, and JavaScript are great and really powerful languages that will keep growing with the Internet. Once you get familiar and inclined with the native web languages, it’s only your imaginations that will limit you from what you can achieve!
Thank you for reading! Follow me here or join my newsletter if you want to keep learning the crucial secrets of web development. You can also have a look at my eBook — Mastering Web Development
More from Owen Far:
What is the difference between web design and web development?_I remember in my early stages of learning web development, that I found myself confused multiple times about the…_hackernoon.com
The advantages of building your website from scratch_Most of the people I talk with regarding the product or website that I am developing, tend to ask if I’m using any…_hackernoon.com