Research and set up frontend framework

[arkid15r]

As a part of Implement Nest frontend milestone we need to figure out what framework/language is the most appropriate for the task. This is sort of research and discuss first task:

• the framework itself (react, angular, vue, svelte, other)
• responsive design (Bootstrap, Tailwind, Materialize, other)
• UI components (ant, material UI, other)

The second step would be the actual code writing and set up process for the selected tools.

[arkid15r]

Assigned it to @MuhammadSaqlain-dev as per Slack discussion

[arkid15r]

@MuhammadSaqlain-dev any progress on this?

[arkid15r]

After narrowing it down to TypeScript + React/Vue:

When comparing TypeScript with React vs TypeScript with Vue, both frameworks are excellent choices for building modern front-end applications with TypeScript, but they differ in architecture, learning curve, ecosystem, and how they handle TypeScript. Here's a detailed comparison to help you choose between the two:

1. Learning Curve

React + TypeScript

• Moderate. React is relatively simple to get started with due to its focus on UI components and "just JavaScript" philosophy. However, the learning curve increases as you dive into more advanced patterns like state management (e.g., using useState, useReducer, or libraries like Redux).
• TypeScript: TypeScript is optional in React projects, but the integration is seamless. However, you need to manually define types for props, state, and component functions, which can feel verbose at times.
• Functional Approach: React promotes functional components and hooks, which may require some familiarity with JavaScript’s functional programming concepts.

Vue 3 + TypeScript

• Easier/Low. Vue is often considered more beginner-friendly compared to React. Vue’s structure is more intuitive for new developers, especially if you're familiar with HTML, CSS, and JavaScript. The component-based single-file approach (with templates, styles, and scripts in one file) is easy to grasp.
• TypeScript: Vue 3 has native TypeScript support, making it straightforward to use. It comes with an official TypeScript library, and types are automatically inferred in most cases, which reduces the need to write extensive type annotations.
• Composition API: Vue 3’s Composition API (which is similar to React Hooks) introduces a new pattern that can have a slight learning curve, but overall it still tends to be more beginner-friendly.

2. TypeScript Integration

React + TypeScript

• TypeScript is widely used in the React ecosystem, but it wasn’t built with TypeScript from the ground up. You’ll often need to add types manually to props, states, and other constructs.
• Type Definitions: You typically define types for props and state using interfaces or types, which is quite flexible, but might feel like extra boilerplate.

  interface ButtonProps {
    label: string;
    onClick: () => void;
  }
  const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
    <button onClick={onClick}>{label}</button>
  );

• JSX/TSX: React uses JSX (which is TSX when combined with TypeScript). JSX is just JavaScript syntax extended with HTML-like elements, so you write TypeScript and use the JSX syntax to describe your UI.

Vue 3 + TypeScript

• TypeScript is natively integrated in Vue 3. The framework was designed with TypeScript in mind, so the TypeScript experience feels smoother and requires fewer manual definitions.
• Type Inference: Vue 3’s TypeScript usage is generally more intuitive and less verbose than React. Types are inferred in many cases, especially when using Vue’s Composition API.

  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    setup() {
      const count = ref<number>(0);
      const increment = () => count.value++;
      return { count, increment };
    }
  });
  </script>

• Single File Components: Vue’s single-file components (.vue files) allow you to define your TypeScript logic alongside the HTML template and CSS, providing a more structured and organized approach compared to React’s JSX.

3. Architecture and Philosophy

React + TypeScript

• Component-Based: React focuses on building UI components, and it’s primarily concerned with the "view" in an MVC pattern. Everything is a component, and React gives you a lot of flexibility in how you structure and manage your app.
• Unopinionated: React is highly unopinionated, meaning it leaves many architectural decisions up to the developer (e.g., how to handle routing, state management, etc.). This flexibility is great for experienced developers but can add complexity for beginners.
• Functional Programming: React encourages a functional programming approach, especially with the introduction of hooks (useState, useEffect, etc.), which are now the go-to standard.

Vue 3 + TypeScript

• Component-Based: Like React, Vue is also component-based, but it is more opinionated about how you should structure your code. Vue provides official solutions for state management (Vuex), routing (Vue Router), and more, which can simplify decision-making for developers.
• Template-Based: Vue separates logic, styles, and templates in single-file components. It uses a declarative template system (HTML-like syntax), which may feel more intuitive for developers coming from traditional web development (HTML/CSS/JavaScript).
• Flexibility with Composition API: Vue 3 introduced the Composition API, which brings a more functional and reactive style to the framework, similar to React hooks. This gives developers more flexibility while retaining Vue's simplicity.

4. Ecosystem

React + TypeScript

• Larger Ecosystem: React has a huge ecosystem of third-party libraries and tools, which makes it very flexible. However, you’ll often need to assemble various tools yourself (like adding Redux for state management or React Router for navigation).
• State Management: React has multiple state management libraries to choose from (e.g., Redux, Recoil, MobX), and each of these works well with TypeScript but requires separate configuration.
• Third-Party Integrations: React benefits from having the largest ecosystem of reusable components and libraries, making it highly flexible for any kind of project.

Vue 3 + TypeScript

• Smaller but Growing Ecosystem: Vue’s ecosystem is smaller compared to React, but it is well-integrated and growing steadily. The Vue team provides official libraries for state management (Vuex) and routing (Vue Router), both of which have TypeScript support.
• Built-in State Management: Vue’s state management solution (Vuex) is built with Vue in mind and has excellent TypeScript support, making it easier to integrate than React’s third-party solutions.
• Developer Tools: Vue has excellent developer tools, such as Vue DevTools, which are easy to use and offer a great debugging experience. It’s slightly ahead of React in terms of simplicity.

5. Performance

React + TypeScript

• React is highly efficient with its virtual DOM implementation. It’s fast, but the performance largely depends on how you structure and optimize your components.
• React apps can become performance-heavy if not managed properly, especially when dealing with complex states or large-scale applications.

Vue 3 + TypeScript

• Vue’s virtual DOM is lightweight and optimized, which results in excellent performance, especially for smaller and medium-sized applications. Vue’s reactivity system is very efficient, and the framework tends to be faster in some scenarios compared to React.
• Tree-shaking in Vue 3 helps remove unused code, further improving performance.

6. Developer Availability

React + TypeScript

• Higher availability of developers, as React is the most popular front-end library. You’ll find a large number of experienced developers for React and TypeScript, and there’s extensive community support.

Vue 3 + TypeScript

• Growing availability of developers. Vue has a dedicated and passionate community, and its adoption is increasing, but it’s not as large as React’s. However, Vue's popularity has surged recently, especially in Asia and startups.

7. Use Cases

React + TypeScript

• Best for: Projects that need flexibility, have complex state management, and require many third-party integrations. It’s ideal for projects where you need full control over your tooling and architecture.

Vue 3 + TypeScript

• Best for: Projects that need a gentle learning curve, fast development, and where you prefer opinionated solutions with built-in state management and routing. Vue is also popular for smaller to medium-sized projects, startups, and projects where maintainability and simplicity are key.

Conclusion

• Choose React + TypeScript if:

  • You need a highly flexible framework and don’t mind making decisions about libraries for routing, state management, etc.
  • You want access to the largest ecosystem and community support.
  • You’re working on larger or more complex apps where flexibility and modularity are critical.

• Choose Vue 3 + TypeScript if:

  • You want an easier learning curve with a more structured and opinionated framework.
  • You prefer a template-based syntax that’s easier to understand for developers with traditional web development backgrounds.
  • You’re working on small to medium-sized apps and want a fast development process with built-in solutions for state management and routing.

Both frameworks are excellent with TypeScript, but React offers more flexibility and a larger ecosystem, while Vue 3 provides a smoother learning curve and an all-in-one solution.

[AbhayTopno]

/assign

[yashpandey06]

@arkid15r let me know if i can work on this to !

[arkid15r]

@arkid15r let me know if i can work on this to !

At this point the most of the work is done as we've been building a new TypeScript/React based frontend with Tailwind support. If you have suggestions on a reusable components or other frameworks we might want to use -- please feel free to share your thoughts.

[arkid15r]

Closing this out, thanks everyone!