Developers face many challenges during development, but sometimes the most crucial challenge arises before we begin developing. Some projects require us to learn a new framework — or even choose a new framework to learn. To ensure the success of our projects, we must assess new frameworks for their size, performance, scalability, and numerous other factors.
But the challenges don’t end once you’ve evaluated different frameworks and selected the best one for your projects. There will inevitably be a learning curve associated with learning a new framework.
Obstacles can be as simple as adapting to perform a familiar task using an unfamiliar system. Or a larger challenge may arise — like using a framework that doesn’t quite work for your team.
Let’s investigate some of the most common challenges developers face when learning a new framework.
Determining Relevance
The first challenge we’re likely to face occurs when we’re determining the most relevant framework to work with. It’s tempting to look to the most common trends and select one of the hot frameworks on the market, like React, Vue, or Angular.
However, there are other frameworks we should consider, such Backbone js, Meteor, Nest, and many more. Finding the right fit all boils down to aligning our needs and requirements with the specifications of each framework. This ensures that we’re selecting a framework that will really work for us, rather than just going with what’s trending.
Another challenge we face is assessing the size, scalability, and versatility of the new frameworks we’re considering. In the tech world, requirements and objectives are always changing. We need to make sure that we’re factoring in both the current size and projected size of our project when we’re selecting a framework. This ensures we can build, deploy, and move our code with ease.
For example, Angular’s build is the heaviest when comparing it with other trending frameworks like React or Vue. If we’re not trying to build a highly interactive application, and we only need the taste of a few interactive components, then AlpineJS might be a good choice to learn. It has developer-friendly documentation and a short learning curve occupying a very small size (almost 4KB).
The time required to market is another factor to consider if we’re looking to beat our competitors. For example, React has a short time to market value. This is part of what makes it such a widely adopted framework within many top organizations. Other frameworks, like Vue and LitElement, also offer fast time to market.
They have a slow-growing community but a short learning curve. This makes them best suited for a small team of developers trying to build a web application. They work well for individual developers, too. Still, even with community support, we should anticipate some growing pains while teams are learning to navigate new frameworks.
When we’re learning a new framework, the biggest obstacle is taking the time to understand an unfamiliar way of completing a familiar task. For example, we could find we need to create a component using an entirely different method. Similarly, we may need to re-learn how to debug, connect with the source tree, open a file, and more.
A trivial task could end up taking a non-trivial amount of time. Our ability to learn this new framework easily — and increase our efficiency — is largely contingent on how well-documented the new framework is.
We also need to consider team size and skillset when we’re trying to upskill our entire team to a new framework. If we’re managing a growing team with many new developers, we might find that learning the concepts of a new framework may take a bit longer. This slows development teams and delays them from starting their tasks. For instance, if we want to upskill our team to React, the concept of JSX can seem alien to new developers.
What’s the Best Way to Get Up and Running?
Many frameworks include CLI tools to generate new projects quickly. But sometimes these impose an opinionated project structure that doesn’t work for every developer team. Choosing the framework that offers the right architecture for your specific team and your specific project is yet another challenge.
If we’re planning to keep things simple, then an MVC architecture would be an ideal choice. On the other hand, if we want to set up a client-server architecture, we’ll need to investigate separate frameworks for the front end and back end.
For example, frameworks like React offer a simple one-stop command called create-react-app. This sets up the project with the necessary files to run. We can also set it up from scratch without using the command, depending on our needs.
Similarly, Vue JS offers an even better setup time. It lets us add Vue components by linking its CDN to our HTML script if we want to use just a part of Vue’s functionality. For larger projects, we can install it using npm. We do this by using the command npm install vue. Vue also has the advantage of having a lightweight build and a short learning curve.
Although the top frameworks have CLI commands that let us set up a project in minutes, they do have shortcomings that force us to follow the flow of setup. This might cause further issues when our project grows, as we can’t easily change the structure. It would be cumbersome to do.
For example, when we use React’s create-react-app, it encapsulates all the npm modules internally. This keeps things simple for the developer. Still, when we want to install more complex modules that interact with the core modules, we must run npm run eject to control the configuration files and dependencies. There’s also an additional catch: we can’t go back to the previous configuration once we’ve ejected our React project.
Though the CLI generation tools are opinionated, maintaining the configuration and dependencies in the future will be overwhelming. This is particularly when the members of our development team are constantly changing. Another option we have is to create our own script that gives us access to the intended configuration files, but that doesn’t eject the CLI configuration.
The frameworks mentioned above are just for the front-end functionality. If we need a back end, we need to set up a separate framework and work between the two to keep our web application running as expected. But what if there’s a way to mimic an MVC architecture with the desired framework of our choice? We can do that using one of the many integration tools available.
The most famous one is Meteor. Using it, we can build full-stack JavaScript applications right on the cloud. Meteor is an open-source framework that lets us create web, mobile, and desktop applications in JavaScript. It also offers functions like hosting and monitoring.
Learning to build applications using Meteor, or using similar tools that have extensive community support, helps teams develop and scale their applications efficiently.
Moving Beyond “Hello World”
The first-ever program we code when installing a new framework is typically “hello world.” We conduct a basic test case to check whether the framework is installed correctly. When we create a project In Angular or React using Angular CLI or create-react-app, they render a simple web page with their logo. These are boilerplate codes.
We’ll clear these codes and delete the unwanted resources before jumping into development. While building through IDEs, we’ll add linting packages such as ESLint and Prettier to enable JavaScript to follow the framework conventions.
The best way to kickstart a framework is to learn the basics of programming the underlying framework. Frameworks leverage these concepts extensively in an advanced fashion.
If, for example, we’re trying to learn React, the base programming language is JavaScript. Some of the concepts in JavaScript, such as declaring variables and constants, function definition, and control flow, are the building blocks of learning a new framework. These concepts are universal to all programming languages.
From the front-end perspective, almost every framework requires us to write some fashion of HTML and CSS. Angular and Vue use direct HTML files, and React and Svelte use JSX and svelte files.
Even though the file name differs, the tags and the code styling remain the same. Similarly, CSS remains an essential component in styling. It’s critical to understand the different ways to write CSS styles and multiple-type selectors.
Even when using a design framework, such as Bootstrap or Material, knowing the CSS basics is important. This is because scenarios can override the existing design modules. Some advanced concepts, like SASS, allow CSS in a more readable fashion to declare variables, perform computation functions, and more.
Turning on the back-end frameworks heavily involves computations and processing of data. Therefore, a strong understanding of control statements and data manipulation techniques is necessary.
Also, you should have a basic understanding of data structures, such as arrays, lists, trees, and so on. Business logic involves different algorithm techniques to effectively solve different use cases.
When working with a back-end framework, we also need to be aware of the databases and their connectivity. All the frameworks will be able to connect with almost every database both relational and non-relational.
You should know the basic CRUD operations in a database through a back-end framework. This is because we’ll be storing all the data we get in the database and retrieve them when needed.
This segues to how we will be sending these data via exposing an API. The most common approach is to expose a REST API. We can make them simpler using some tools discussed in the next section.
What Does the Supporting Ecosystem Look Like?
Generally, a framework alone isn’t sufficient for implementing all the features we intend to. This is especially true when we’re working with a large-scale web application. One tool that has an opinionated view of usage is the state management tool.
Organizations often couple React with state management tools like Redux or Mobx. Since the state (data) of a component pertains to itself and the “prop drilling” problem in React, a single global store can solve this problem.
Although Mobx isn’t as popular as React, its learning curve is notably easier and smaller. One advantage Mobx offers is that it allows multiple stores. Alternatively, you can use the Context API. React 16 introduced the Context API as a competitor to Redux and Mobx, eradicating lengthy boilerplate code.
Unlike React, which is a library, Angular is a complete framework that comes with package-ready tools for state management. It solves most of the use cases where React fails. Angular has Ngrx for state management for large-scale apps where services aren’t enough.
The same concept applies to back-end applications. Using NodeJS as an example, Express is one of the popular web frameworks extensively used in server-side applications with nodes. Express offers less coding boilerplate. It’s also scalable to large applications.
It offers simplicity and flexibility for easy routing mechanisms. Without Express, it often becomes tedious to define all of the APIs and route the service with the vanilla node.
The object-relational model (ORM) is one of the standard tools used on the back-end. This tool is used to map database tables or documents to the models of the back-end code. When we want to write a query to get the data from a database, instead of writing raw queries, ORM offers flexible function calls to retrieve the data and map them to the models in the back-end.
This provides straightforward code structure, reusability, and maintenance of the code. Although the initial learning curve can be larger, it makes the code much simpler for addition and manipulation once mastered. Sequelize is the standard ORM for SQL databases, and Mongoose is the standard for MERN or MEAN stack codebases.
There are many frameworks on the market, and they’re constantly being updated to new versions. Staying in pace is essential as a developer. The best place to start with a new framework is to go through the official documentation and understand the basics.
Whenever something doesn’t work as intended, go through the console and terminals to check for what error has occurred and try to alter the code accordingly. If it doesn’t work even then, search for that error statement on the web, there must be some forum or thread that could help you out.
There can be times when some concepts may sound overwhelming or challenging to comprehend. But the best way to learn is to implement those concepts in a real-time test project and figure it out by implementation. Start with something simple for your test project — something you can implement within an hour. This way, you can get a feel for the framework without getting in over your head.
When learning a new front-end framework, consider testing it out with SpreadJS or Wijmo from GrapeCity. SpreadJS offers a complete spreadsheet solution with over 500 Excel functions. Wijmo has powerful, framework-agnostic, Angular-supported UI components.
Kevin Ashley