Framework vs Vanilla JS for students

Question

I'm serving as a tech lead for a student group's charity project. We're building a website which puts a bunch of homelessness resources in one place. There are two goals to the project: create a useful website, and let students learn as they build it.

The group is comprised of all levels of college CS student. Most have never done web dev or worked with any of the associated technologies. People get uneasy when I mention using a JS framework.

I want to make sure they get out of it what they came in for -- which by all reports is learning -- but I'd prefer that they enjoy it and don't quit (which would be totally fair, cause they are volunteering their time).

The group has been asking why we should use a framework. I say

• testing
• reusability
• dealing with state

They feel that learning multiple things at once could be bad, and that this would be overkill. Honestly, I'm not sure if it would be overkill. It could be. But learning vanilla JS is certainly less valuable than learning React.

Am I being dense? More importantly, would the project better reach it's goals by using a framework, or not?

Answer 1

I believe that after getting to know html and css, starting with Vanilla JS or with a framework are both the same thing to a new student that knows nothing, he'll be learning new things from the beginning so if you think learning a framework is more valuable than starting with Vanilla JS then go ahead start with a framework.

When it comes for professional working, most of the jobs require working with frameworks.

Now some people will ask "but how do you want to teach them a framework without giving them the basics of JavaScript?". That's a wrong question. Again, to a new student they both aren't related. Vanilla JS is not considered the basics of a framework, the basics is JS yes but why not learn JS through the framework. PS that's how i learned about the new ES features, started with react native directly.

Answer 2

As a general rule, everything has its benefits. The trick is finding the tool which has as many of the benefits you need, or want, with as few of the problems you want to avoid. The choice of which JavaScript framework, including none, is no different. Often the choice is made by the management, or dictated by the established code-base. That could very well be the reason supplied to the group.

I believe that it would be better to explain to the group why you've chosen to use a framework, and why you've selected React (as it seems you have). The reasoning should be project-based, not based on the utility to the group later in the job market. Learning vanilla JS is not, as you suggest, less valuable than learning React, or some other framework. Neither in general, nor in the job market. There are needs for programmers who can do vanilla JS and those who are fluent in React.js - and Vue.js, Meteor.js, Backbone.js, and Angular.js 2, among others. Which ever framework you select might not be any more valuable, eventually, to the students' future than vanilla would be.

The reasons to use a framework, when you do, can include the points you've already mentioned. If those are points which are important to the project. The issue of learning multiple things at once is not really an issue. First off, they are already learning several things - HTML, CSS, design, UX, and probably some of the aspects of the server setup and maintenance. Whether they are learning vanilla JS, and how to keep everything working and bug free, or leaning a JS framework becomes insignificant.

The final question would the project better reach it's goals by using a framework, or not? isn't something that can answered anonymously. It is something which has to be evaluated in context for the project itself. In this case it seems the "project" has two objectives: the finished product and the learning of the group.

---

Using a JS framework vs vanilla JS is similar to planning a road trip to Miami. There are many routes that will get there. It isn't even necessary to use a map. You can keep picking your road by knowing that you want to go east and south. Eventually you will get there. There may be some excellent scenery along the way. There may also be a few detours, road blocks, and dead-ends. How you choose to plan, and which roads you use, depends on the purpose of the trip. If the point is to see the country between here and there, taking country roads and scenic byways with little pre-planning could be the best option. Anything goes, and you can pick any road, stop anywhere, and do anything you want. If, on the other hand, the point is to get to Miami for Spring Break, a better choice might be to use a map, travel on Interstate highways, with targeted stop-over points each night. Using the first, free-form, method could make you late for the party. Maybe even not get there before it was time to head back for classes after the break. The Interstate system is the "framework" which has been built to make travel easier. It's not always the best choice, it's only one of the choices, and serves well for one of the possible purpose of a road trip.

---

Knowing that there are options, and how to select between them, could be more important than the choice you make for the current project.

Answer 3

I will first let them be familiar with the web developer roadmap here https://github.com/kamranahmedse/developer-roadmap. They may feel overwhelmed by the information list there. But for college CS students I think it is important to know what it takes to be a qualified web developer.

I will also suggest them to check 2020 js survey https://2020.stateofjs.com/en-US/, this survey has done for 4 years I guess. So they can have a sense of the latest development of js.

About the question why we should use a framework I will let them check http://todomvc.com/. it is a very interesting web and project to compare/show how to use all different kinds of frameworks and just vanilla js to build a todo web app. So they can have a sense of what framework can do for us. If they have never done web dev before they may feel overwhelmed again. Besides, some frameworks there have "died" so I may just try react/vue/jquery/es6.

A point here is (except for compare the frameworks) there many ways to do web developments, no right or wrong way but for the beginners we can choose a way with flat (relative) learning curve. I sometime advice my friends not to use angular because learning ts and the framework at the same time is too hard for beginners (using your students' word "learning multiple things at once could be bad") but learning js with jquery (or anything to manipulate dom) is probably necessary for web development.

BTW, if they just want to learn js they may try nodejs. But learning nodejs is another big topic.

Answer 4

You have to understand that the learning curve for learning a JS framework like React is more complex than simply learning Vanilla JS. Learning an arrow function for example is much easier than learning an arrow function plus functional components, state, props, hooks and third party Redux. However, if you are allowed to segregate students based on their aptitude for learning new stuff then you might consider the more advance ones assigning them learning this stuff. You might also assign others in doing simply testings.

Also, I don't know if you tried SvelteJS. SvelteJS is much closer to vanilla JS and use normal CSS (no JSX) and the learning curve is definitely lower than learning React or even VueJS.

Answer 5

Yes

To make JS learn-able, you need to use a library to clean it up. For example doing a foreach of an object in JS has many problems. However using a library can make it much simpler.

No

Using a complex library will make learning more complex.

Conclusion

Only use libraries that make it simpler, but do use them.