Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Frontend Hub

Talk anything related Frontend development, HTML/CSS, client side Javascript, Bootstrap, etc

Frontend Hub / General

How I learn any front-end framework

How I learn any front-end framework

Frontend Hub / General · March 23, 2019 at 3:35am (Edited 7 months ago)

You decided to learn x framework, You open youtube or any search engine you prefer to search for any tutorials related to this “x” framework and suddenly after 30 min you scream “Eureka”, I think this framework is similar to my previous framework and you are right you don’t have to learn it from scratch, In this post I will show to you my experience to learn frontend frameworks and how those frameworks are closed to each other.

Every time you decided to learn a front end framework, you must hear those terms over and over ( components, routing and managing state ) Let’s break it down.

Components

  • The heart core for any framework building components makes it reusable.
  • Most modern frameworks using JSX or HTML template engine,
  • All frameworks provided lifecycle hooks that provide visibility into component life moments like creates, renders, destroy and the ability to act when they occur.
Routing
  • Nowadays most modern frameworks provided API to create and manage client-side routing.
Managing State
  • All freameworks are built with a way for components to internally manage their state without any need for an external library or tool.
  • Many Frameworks are built with a way for components to share same state for example (Angular has a Service, React now has Context API).
  • Sometimes frameworks solutions are not enough especially when your state is huge so you can consider using a library like redux.

After Finishing learning basics let’s get our hands dirty and building projects.

Building projects

In order to understand aspects of something you need to know it well and this knowledge does not come from reading books or watching visual lessons only, the real test comes with a real problem in real life, during this article I bring you some ideas for projects covering many aspects of any frontend framework you choose.

Notes:

  • The projects listed in this subject are gradual in their difficulty and each project adds to its predecessor.
  • The order of projects from the youngest to the most comprehensive.

1. Find & Display ( clone )

The first application which is commonly used is the clone of any known site using its public API, try to build a simple search bar with drop-down list holds results coming from endpoint API, check returning data before displaying it like if there is an image or not to display.

Endpoint API Example:What you will learn:
  • Using HTTP client to make a request to endpoint API.
  • Using keyboard event listener, for example, once a user hit enter call endpoint API to fetch result data.
  • Learn how to display single data or group of data.
  • Styling your display with Interpolation data.
  • Structural your display.
  • Master-Details: list results add a link for each item in result to the item details page.
  • Learn how to pass data from master page to a details page.

2. Auth App

some of this endpoint API I mention in the previous section require some authentication so in this section try to add or build another app with login /register page and if the user is login redirect him or her to the user homepage and prevent guest users from pages that require the user to be logged in.

What you will learn:
  • Route guard: some pages require authenticated user only.
  • How to send and save JWT (JSON web token) to make requests that require an authenticated use.

3. CRUD App

create, read, update and delete app is the most popular front-end app in this section you can build this app offline using local storage or using online service like Firebase or even integrated it with a back-end framework.

Project Examples:
  • Bookmark app.
  • To-Do App.
What you will learn:
  • Validate user input in form and display error if the user inserts wrong data.
  • How to make put, delete, post and get HTTP request.
  • Integrate your app with any back-end framework.
  • Try to add auth capabilities for your back-end framework.

4. Chat App

In previous sections, all the requests to the back-end are unidirectional you don’t have a problem managing your app state there, but in this section, we try to build chat app using web sockets and it’s bidirectional and we can’t wait for the response to update the view, we need another way to manage our client-side state.

What you will learn:
  • learn how to use manage state solutions like redux for react, ngrx for angular 2+ or vuex for vuejs and how to integrate it with your client-side app.
  • Make your app more reactive (listen to network state and notify the user with the new message).

March 23, 2019 at 3:17pm

Thank you for sharing your experience @imm9o on how to learn any frontend framework. I think with understanding basics of Javascript, html and css and having this patterns in mind, will let you learn any framework.

I believe most of them use similar concepts, maybe bit different syntax, but at the end, all do what it's need for modern web apps.

Would like to see more posts from you in future.

    like-fill
    2
    • reply
    • like

    Wow nice, thanks for sharing this!

    Over time I created this bad habit, of learning in the hard way first. When I started making sites, I was learning per need. Many times I didn't even knew basics of JavaScript and I made very complex apps. One thing I learn, another one completely missing. I didn't noticed at the time that it is bad, it worked for me. But then when it came time to learn new frameworks and keep up with all, it was hard.

    So recently I gone through js basics :D I did all in reverse so far :D Now working with frameworks more easily

      like-fill
      5
      • reply
      • like

      I will share this post on my insta story, on instagram.com/plavookac , I believe people who follow me will find this very valuable, tnx for writing once again :D

        like-fill
        1
        • reply
        • like

        March 24, 2019 at 10:46am

        Thanks for sharing this post here. I like the approach of learning you mentioned here. Cloning, and creating Auth, Crud and Chat app, is a fantastic idea.

        How did you come up with this process? :)

          like-fill
          4
          • reply
          • like

          March 28, 2019 at 9:30am

          Thanks for sharing this post here. I like the approach of learning you mentioned here. Cloning, and creating Auth, Crud and Chat app, is a fantastic idea.

          How did you come up with this process? :)

            Thanks for your compliment, observing many tutorials, try to implement what I see, comparing it with official documentation, then comparing with other frameworks, but the most important source for me talk from "Evan You" (creator of Vuejs framework) introducing Vuejs for the first time in Laracon EU 2016 and he explains very well why "x" exists in Vuejs or in any framework

            Watch it here very nice talk.

              like-fill
              2
              • reply
              • like

              March 29, 2019 at 6:23am

              Thanks, thats very cool!

                like-fill
                1
                • reply
                • like

                April 3, 2019 at 3:58am

                Thank you for sharing this :D

                As for Front end framework, my first step is learning Angular from yotube, and i found out that Ionic kinda interesting too. as a basic from web dev before, i can keep it up till now practicing making whatsap clone apps with ionic :)

                  • reply
                  • like