{"id":4700,"date":"2016-06-28T15:00:00","date_gmt":"2016-06-28T13:00:00","guid":{"rendered":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/uncategorized\/responsiveness-with-a-front-end-framework\/"},"modified":"2022-11-28T16:19:05","modified_gmt":"2022-11-28T15:19:05","slug":"responsiveness-with-a-front-end-framework","status":"publish","type":"post","link":"https:\/\/careerfoundry.inbearbeitung.de\/en\/blog\/web-development\/responsiveness-with-a-front-end-framework\/","title":{"rendered":"What's a Web Framework and Why Are They Useful?"},"content":{"rendered":"

Frameworks are powerful tools that can make a web developer\u2019s job easier. <\/strong><\/p>\n

They provide a standardized set of design and development conventions that can be applied and modified for your website. Wait\u2014what? Let me explain.<\/strong><\/p>\n

Imagine you are in the kitchen frying an egg. Your goal is to flip the egg over, but you don\u2019t know how you\u2019re going to do it yet. You can try to fashion up your own utensil to do it or you can use an already existing utensil\u2014a spatula. In the same way, frameworks are tools that help you in not having to reinvent the wheel every time you want create different elements on a website.<\/p>\n

In this article, I’ll cover the usefulness of frameworks, popular types, how and when to use them, and what it means to implement a responsive frontend framework for your website. If you’d like to jump ahead to a section, just use the clickable menu:<\/p>\n

    \n
  1. Why are web frameworks useful?<\/a><\/li>\n
  2. Types of web framework<\/a><\/li>\n
  3. Popular frameworks<\/a><\/li>\n
  4. How do I use frameworks?<\/a><\/li>\n
  5. What is a responsive framework?<\/a><\/li>\n
  6. Final thoughts<\/a><\/li>\n<\/ol>\n

    1. Why are web frameworks useful?<\/h2>\n

    Essentially the allure of these is the amount of time that is saved and the resulting efficiency in getting a project rolled out faster because there\u2019s a lot less of the initial work to be done.<\/p>\n

    Frameworks take care of tasks like default browser settings, file structures, and layout templates for your website. This automation generates a uniform design for page elements like text, tables, forms, and buttons, amongst other things.<\/p>\n

    Even complex navigation menus become standardized with frameworks as it can be consistently applied across your website with ease.<\/p>\n

    2. Types of web framework<\/h2>\n

    There are many different kinds of this platform available for programmers.<\/p>\n

    Typically, like a lot of things within this discipline can be split between frontend and backend development<\/a>\u2014first let\u2019s make the distinction between the two to help you understand the usefulness of these solutions.<\/p>\n

    Backend frameworks<\/h3>\n

    These are designed to make the responsibility of interacting with the database an easier endeavor for the developer. It automates a lot of functions and processes that web developers use to record and retrieve user-inputted data.<\/p>\n

    Frontend frameworks<\/h3>\n

    As the name suggests, these are very helpful on the presentation side of the website, creating a good foundation from which to build pages. These frameworks combine HTML, CSS, and JavaScript<\/a> to be really effective in creating conventions for various elements. Typically frontend web developers use them in conjunction with other effective tools<\/a>.<\/p>\n

    HTML conventions<\/a>\u00a0allow for standardization for elements like typography, while CSS<\/a> conventions can help standardize positioning of elements in a grid-like system on the pages. This makes it easier for the developer to arrange and organize elements into a simple and uniform design across multiple displays and browsers. JavaScript conventions offer the ability to style more advanced components like image carousels, lightboxes, button behaviors, and pop-ups.<\/p>\n

    On another note, there are JavaScript frameworks<\/strong><\/a> that focus on full application support\u2014like Angular.<\/strong>\u00a0Libraries of Javascript code like jQuery<\/a> and React.js<\/a> are also helpful in developing conventions that can be readily implemented in websites.<\/p>\n

    To recap, the use of these tools helps the developer get up and running quickly without having to get bogged down with the initial hurdles that come with setting up a website. It creates uniform code across all pages of your website and presents a clean look for users. This in turn solves common issues like typography consistency and positioning difficulties on different pages.<\/p>\n

    Best of all, frontend frameworks resolve any issues with browser compatibility and are key to responsive web design<\/strong>, which we’ll discuss further on.<\/p>\n

    3. Popular frameworks<\/h2>\n

    There are many of these tools that have become must-haves for beginner and expert web developers alike. As well as different languages, they focus on different directives and outcomes.<\/p>\n

    Let’s take a look at a few of the major ones out there:<\/p>\n

    Bootstrap<\/h3>\n

    One of the most popular frameworks is Bootstrap, which was originally developed by Twitter<\/a> to maintain consistency in their interface development.<\/p>\n

    It’s very polished and efficient, and makes website development easier and faster. It has standardized conventions that are well recognized for HTML elements like buttons, alerts, forms, and typography.<\/p>\n

    Ruby on Rails<\/h3>\n

    So popular that it’s now known simply as “Rails,” Ruby on Rails <\/a>has revolutionised this language.<\/p>\n

    As well as making it one of the easier programming languages to learn<\/a>, Rails is particularly popular with beginners looking to code full-stack early on in their careers.<\/p>\n

    Foundation<\/h3>\n

    Foundation was created from the Zurb style guide and much like Bootstrap, offers a complete solution for frontend design.<\/p>\n

    Many large companies like Meta, Yahoo, and Ebay utilize Foundation in their layouts. The framework encourages web developers to expand on the conventions and personalize them for developers\u2019 websites.<\/p>\n

    Express<\/h3>\n

    This is a highly useful web framework for the game-changing Node.js tool<\/a>. Essentially, it facilitates full-stack coding with JavaScript.<\/p>\n

    As the name suggests, Express is useful for quickly connecting to databases, among many other functions. Its core features are middleware, routing, and as a template engine.<\/p>\n

    In fact, a lot of other frameworks are based on Express itself\u2014Sails, Kraken, and Nest.js to name but a few of them.<\/p>\n

    You can learn more about it on the official Express website<\/a>.<\/p>\n

    Skeleton<\/h3>\n

    Skeleton is a lighter example that doesn\u2019t come with all the bells and whistles that accompany the heavy-lifters like Bootstrap and Foundation.<\/p>\n

    This encourages greater customization by only providing styling on the most basic and necessary elements. Developers who only need specific components to be styled utilize light-weight frameworks like Skeleton to achieve their goals.<\/p>\n

    A simple Google search will turn up a lot of results for top tools being used and recommended. It\u2019s definitely beneficial to check out the different options and see which suits your development needs and design goals.<\/p>\n

    4. How do I use frameworks?<\/strong><\/h2>\n

    Regardless of whether a developer uses a full frontend framework like Bootstrap or a lightweight option like Skeleton, these are efficient tools that should be seriously considered in every developer\u2019s process.<\/p>\n

    Recognized frameworks offer more ease in collaboration as developers can access the same libraries for design conventions without having to resort to individual opinionated decisions. Additionally, there is support from the specific community with tutorials and articles on how to effectively use it.<\/p>\n

    The ease of implementation and efficiency makes it almost a necessity to employ these tools in a web developer\u2019s process.<\/p>\n

    Any time a programmer is finding themselves creating an ever-growing proprietary list of CSS rules, it\u2019s probably a good idea to look into using a framework to tidy things up.<\/p>\n

    5. What is a responsive framework?<\/h2>\n

    One of the best features of these systems is that they help create websites that are easily accessible and are able to be viewed across different browsers on different devices.<\/p>\n

    A lot of frameworks accomplish this with dynamic code<\/strong>\u2014utilizing classes that can be reused and formatted to take into consideration the device and\/or browser that is being used.<\/p>\n

    In other words, the layouts of webpages will change\u2014certain elements will disappear and text will be smaller on smaller screens, while certain Javascript elements might not take effect at all. On larger screens, the extra real estate can be used to showcase higher quality images and more sophisticated design elements, as well as allowing for the white space beloved by web designers.<\/p>\n

    In this current age when users are more likely to view websites on their mobile devices<\/a> than their computers, it\u2019s important to have a mobile responsive website that creates an enriching user experience no matter what interface the user interacts with.<\/p>\n

    6. Final thoughts<\/h2>\n

    Critics of frontend frameworks cite them as the source of a lot of cookie-cutter websites that are identical in appearance and interaction.<\/p>\n

    This however, is an oversimplification.<\/p>\n

    Why? Let\u2019s go back to the cooking example: a spatula is just a spatula\u2014a lot of people have one and use the tool in the kitchen. But the food that is created will vary wildly across the spectrum, depending on the cook.<\/p>\n

    In the same light, frontend frameworks are simply a tool that can be employed to create diverse and distinctive websites. Yes they’re efficient, but it’s up to the developer to make sure they’re effective.<\/p>\n

    If you want to learn some more about web development right now, these articles may interest you:<\/p>\n