Research technologies for client side

[IyanRobles]

Look for possible technologies for the client (Didier & Mateo)

[didierrc]

The following markdown file gives an overview of the "desired" (in my opinion) frontend technology that we should use for the project. This will be discussed in the next lab session.

What is React.js???

Basically, React is a libray for web and native UI. Its main feature is to use Components that we can reuse all over our interfaces. Ex: Each "Tweet" structure that we see on X. We just need to change its content.

Why Use it?

• The Component-base structure as stated before. Good for reusability and maintenance.
• Has a great community behind and a lot of documentation. So there is a lot of questions and a lot of answers that we can find on the Internet.
• Stable API: Most of the changes/improvements made to React have little impact or very easy to change.
• It is the most demanded in the labour market !! I know, this is not crcucial for the project but it is a good thing (IMO) to learn from it.
• React Native: Basically, React has a "submode" that lets you build mobile applications (one of the optional features). So learn once and build twice!!

Next.js

We have seen the beauty of React but is still a library (bunch of classes and interfaces that we can use in our applications). If we want to build entire apps with React, it recommend to us using one of its frameworks -> Next.js

The only "bad" thing brought to you by ChatGPT

Learning Curve: There may be a learning curve for developers who are new to React. But we are not "regular" devs :) (although 3rd course of SW Engineering is pretty hard :( - always a tradeoff...)

Other Frameworks

1. Angular
   • Two-Way Data Binding: Simplifies handling user input and application state changes.
   • Strong MVC Architecture: Provides a structured and organized framework for building large-scale applications.
   • Dependency Injection: Facilitates modular and testable code.

Overall, I think Angular facilitates the architectural part since it follows the MVC pattern but I think we can discuss the usage of MicroServices.

An architectural pattern that structures an application as a collection of small, independent, and loosely coupled services. Each service is designed to perform a specific business capability and can be developed, deployed, and scaled independently.

Also, nowadays it is not very recommended it by many people.

2. Vue.js
   • Approachable: Vue.js is known for its simplicity and easy integration, making it beginner-friendly.
   • Flexibility: Allows developers to incrementally adopt Vue.js into existing projects.
   • Performance: Vue.js has good performance with a small footprint.

Well, I have been researching and Vue is another interesting option to take into account. It has a lot of approval (this may not mean anything) and has good documentation. Although, as far as I have seen, React (or its Framework Next.js) is more used than Vue by big companies like Meta, Amazon, Github, etc.

Links:

• Official Web page
• Documentation
• React Native for the Win!
• THE framework - Next.js
• React Course (Spanish) - midudev
• Repo to know React (Spanish)
• Next.js Course (Spanish) - midudev
• React from Begginers (English)
• React Native (English)

Others

The following is not a Final decision, it is just an overview of WHAT technologies we could choose to build our Application. I have used ChatGPT for that. Although it cannot give us the RIGHT answer, it is very helpful when trying to decide/have an opinion about it.

The choice of technology for a web application depends on various factors such as the project requirements, team expertise, scalability needs, and future plans. Considering the context of designing a web application based on the Spanish TV show "Saber y Ganar" and later adapting it for mobile devices, a combination of frontend technologies and frameworks is often a suitable approach.

Here's a suggested technology stack:

1. Frontend (Web):

• React.js: React is a popular and widely adopted JavaScript library for building >user interfaces. Its component-based architecture is beneficial for creating >reusable and modular UI elements. React also has a large community and a rich >ecosystem of libraries and tools.

• HTML, CSS, and JavaScript: These are fundamental technologies for web development. HTML for structuring content, CSS for styling, and JavaScript for adding interactivity. They work seamlessly with React to create a robust frontend.

2. Frontend (Mobile):

React Native: Since the plan is to later adapt the application for mobile devices, React Native can be a great choice. React Native allows you to build mobile applications using React and JavaScript, sharing a significant portion of the codebase between the web and mobile versions.

3. Backend:

Node.js with Express: Node.js is a server-side JavaScript runtime, and Express is a minimal and flexible Node.js web application framework. They are well-suited for building scalable and lightweight backend services, providing a good match for the frontend technologies.

4. Database:

MongoDB: MongoDB is a NoSQL database that works well with Node.js and is suitable for scenarios where a flexible schema and quick iteration are important. It can store the diverse data associated with the TV show application.

5. API Communication:

RESTful API or GraphQL: Depending on the application's requirements, you can choose between a RESTful API or GraphQL for communication between the frontend and backend. GraphQL provides more flexibility in data retrieval.

6. Containerization and Orchestration (Optional, for scalability):

Docker and Kubernetes: If scalability and deployment efficiency are crucial, containerizing the application using Docker and orchestrating the containers with Kubernetes can be considered.

[Veneiro]

Frameworks and their Potential Challenges

React.js

• Description: Developed by Facebook, React.js is a JavaScript library for building user interfaces. It uses a component-based approach that allows code reusability and facilitates maintenance.
• Pros:
  • Virtual DOM: React utilizes a virtual DOM to enhance performance, updating only components that have changed.
  • Active community: React boasts a large community of developers and a wide variety of available resources.
  • React Native: Allows mobile app development using JavaScript and React.
• Cons:
  • Steep learning curve: Beginners in React may face a learning curve due to its component-based programming paradigm.
  • Initial setup: Setting up a React project from scratch may require additional knowledge of tools like Webpack or Babel.
• Potential Challenges:
  • JSX concept: Understanding JSX (JavaScript XML), the syntax used to define component structure, may be confusing for React newcomers.
  • State management: Managing state in React, especially in larger applications, can be complex. Understanding different methods to handle state, like local component state and global states using Redux or Context API, can be challenging.
  • Component lifecycle: Grasping the component lifecycle in React and knowing when to use methods like componentDidMount() or componentDidUpdate() may prove difficult for beginners.

Angular

• Description: Developed by Google, Angular is an open-source JavaScript framework used for building single-page web applications (SPA). It utilizes the MVC (Model-View-Controller) approach to organize code.
• Pros:
  • Dependency injection: Angular offers an integrated dependency injection system that facilitates managing dependencies between components.
  • TypeScript: Angular is written in TypeScript, providing features like optional static typing and IDE autocompletion tools.
  • Directives: Allows creating custom directives to extend HTML functionality.
• Cons:
  • Complexity: Angular may be perceived as more complex than other frameworks due to its myriad of features and concepts.
  • Migrations: Angular version updates may require significant changes in the codebase, which can be cumbersome for ongoing projects.
• Potential Challenges:
  • TypeScript: Angular is written in TypeScript, adding an extra level of complexity for those unfamiliar with this superset of JavaScript. Understanding static types and TypeScript features may hinder the learning process.
  • Dependency injection: Understanding the concept of dependency injection and how it's implemented in Angular can be challenging for web development newcomers.
  • Directives and Pipes: Grasping advanced concepts like directives and pipes in Angular may require additional study and practice.

Vue.js

• Description: Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It's known for its gentle learning curve and flexibility.
• Pros:
  • Gentle learning curve: Vue.js is easy to learn and start using, making it ideal for beginner developers.
  • Clear documentation: Vue.js boasts clear and comprehensive documentation that facilitates the learning and development process.
  • Small size: Vue.js has a small library size, making it fast to load and easy to integrate into existing projects.
• Cons:
  • Lower adoption: Despite its increasing popularity, Vue.js still lacks the same level of support and tools available as React or Angular.
  • Limited ecosystem: Compared to other frameworks, Vue.js may lack certain third-party libraries and tools.
• Potential Challenges:
  • Initial setup: While Vue.js is known for its gentle learning curve, setting up a project initially may be a hurdle for beginners. Understanding how to configure Vue CLI (Command Line Interface) and other tools can be challenging.
  • State management: Similar to React, understanding state management in Vue.js can be a challenge for new developers. While Vue.js offers its own state management system (Vuex), understanding how to integrate and effectively use it may take time.
  • Directives and components: Although Vue.js simplifies the process of creating components and using directives, understanding how they work and when to use them appropriately can be confusing for beginners.

Express.js

• Description: Express.js, often referred to as Express, is a flexible and minimalist web application framework for Node.js. It provides a robust set of features for building web and mobile applications, including routing, middleware support, and templating engines.
• Pros:
  • Minimalist: Express.js follows a minimalist design philosophy, allowing developers to build applications with minimal overhead and boilerplate code.
  • Middleware support: Express.js offers a wide range of middleware functions that can be easily integrated into the application's request-response cycle to handle tasks such as logging, authentication, and error handling.
  • Scalability: Express.js is highly scalable and suitable for building both small-scale and large-scale applications, thanks to its modular architecture and support for asynchronous programming.
• Cons:
  • Lack of structure: While the minimalist design of Express.js provides flexibility, it can also lead to a lack of enforced structure, making it challenging for developers to maintain consistency and organization in larger projects.
  • Asynchronous programming: Express.js heavily relies on asynchronous programming techniques, which can be complex for developers unfamiliar with concepts like callbacks, promises, and async/await.
• Potential Challenges:
  • Middleware configuration: Configuring middleware functions in Express.js and understanding their order of execution can be challenging for beginners, especially when dealing with complex application requirements.
  • Error handling: Implementing effective error handling strategies in Express.js, such as handling exceptions and managing HTTP status codes, requires a solid understanding of the framework's error handling mechanisms and best practices.
  • Security: Ensuring security in Express.js applications, including protecting against common vulnerabilities like cross-site scripting (XSS) and SQL injection, requires diligent implementation of security measures and adherence to security best practices.
  • Routing: Understanding and implementing routes in Express.js, especially for complex applications, may pose a challenge for beginners.