small_avatar_AdrianR3.png

thumbnail_avatar_AdrianR3.png

avatar_AdrianR3.png

Adrian

small_avatar_Grzegorz.png

thumbnail_avatar_Grzegorz.png

avatar_Grzegorz.png

Grzegorz

GET IN TOUCH

Prettier is like your very experienced colleague who constantly whispers advice about your code consistency and readability. Who wouldn’t want one? 


Unfortunately, very experienced developers are often busy, and that’s why [Prettier](https://prettier.io/)
 was created. In essence, it’s a tool that helps developers implement best coding practices automatically. 

Here is a concise **Prettier guide** including key benefits, **React** and **Typescript** code examples, and comments from our developers. 

#### **Key benefits**
- **Opinionated Formatting:** Prettier has a set of default formatting rules based on community best practices, making it easy to format your code without spending time on style debates. 

- **Multiple Language Support:** Prettier supports various programming languages such as JavaScript, TypeScript, CSS, HTML, and more. 

- **Customizable Rules:** Prettier allows you to customize the formatting rules to fit your project's specific needs, giving you more control over your code formatting. 

- **Easy Integration:** Prettier can be integrated into your development workflow with ease, enabling you to automate your code formatting and improve your productivity. 

- **Improved Readability:** By formatting your code consistently and following best practices, Prettier can make your code more readable and easier to understand. 

- **Reduced Maintenance Time:** Prettier can save you time on code maintenance, as it can automatically format your code as you write it, reducing the need for manual formatting.

- **Reduced Human Error:** By automating the code formatting process, Prettier can reduce the chance of human error and ensure that your code is always formatted correctly.


![ ](\uploads\blog-prettier_Lukasz_post_cytat_01-1_3tfodtSBNooCMUZATR9yqN.jpg)
#### **How does Prettier work?**
Prettier parses your code into an abstract syntax tree (AST) using a parser specific to the programming language you are using. 

1. Applies a set of formatting rules to the AST, modifying it to conform to the formatting rules. These rules are based on community best practices and are designed to ensure consistency and readability in your code. 

2. Generates formatted code based on the modified AST, producing a new code file that conforms to the formatting rules. 


Prettier also provides options to customize the formatting rules, allowing you to tailor the formatting to your project's specific needs. Once configured, you can integrate Prettier into your development workflow using various tools such as code editors or build scripts. This way, **you can automate your code** formatting and maintain a consistent code style across your team.

#### **How to install Prettier?**
To configure Prettier, you can create a configuration file in your project's root directory. Here is the step-by-step guide:

1. **Install Prettier:** You can install Prettier either globally or locally to your project using a package manager like npm or yarn. For example, to install Prettier globally, you can run the following command in your terminal:


``npm install -g prettier``

2. Create a configuration file: Create a ``.prettierrc`` or ``prettier.config.js`` file in your project's root directory.

3. Specify formatting rules: In your configuration file, you can specify the formatting rules you want Prettier to apply. You can find a list of available options in the Prettier documentation. Here's an example ``.prettierrc`` file that sets the maximum line length to 80 characters and uses single quotes for string literals:

![ ](\uploads\blog-prettier_Lukasz_post_cytat_01_C7f9YCZX42n8FbuHij8i2.jpg)
#### **How does Prettier work with JavaScript and Typescript?**
Here are some examples of how Prettier works with JavaScript and TypeScript:

1. Formatting JSX  

Before:




3. Formatting TypeScript in a Functional Component

Before:



#### **What are alternative and complementary tools?**
1. [ESLint](https://eslint.org/)
: ESLint is a popular static analysis tool for identifying problematic patterns found in JavaScript code. It has built-in rules and plugins for code formatting and styling.


2. [JSHint](https://jshint.com/)
: JSHint is a community-driven tool that helps detect errors and potential problems in JavaScript code. It has built-in options for enforcing code style and formatting.


3. [StandardJS](https://standardjs.com/)
: StandardJS is a style guide and linter for JavaScript code. It has a built-in code formatter and can be integrated into various editors and IDEs.


4. [Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)
: Beautify is a code formatter that can be used with various programming languages, including JavaScript. It has plugins for popular editors and IDEs like VS Code, Atom, and Sublime Text.


5. [CodeMirror](https://codemirror.net/)
: CodeMirror is a versatile text editor for the web that can be used for formatting and styling code. It has built-in features for code highlighting, indentation, and autocomplete.


6. [JS Beautifier](https://beautifier.io/)
: JS Beautifier is a simple tool that can be used for formatting and beautifying JavaScript code. It has options for configuring the code style and formatting rules.


7. [Black:](https://github.com/psf/black)
 Black is a Python-based code formatter that can be used for formatting code in various programming languages, including JavaScript. It has options for configuring the code style and formatting rules.


#### **Summary**
Prettier is a code formatting tool that automatically implements best coding practices, and improves code consistency, and readability. 

It has default formatting rules based on community best practices, supports multiple programming languages, is customizable, and can be easily integrated into a development workflow. Prettier works by parsing code into an AST, applying formatting rules, and generating new formatted code. Developers can install Prettier by creating a configuration file with specified formatting rules. Prettier works - among others - JavaScript and TypeScript. 

I encourage you to try out Prettier and other similar tools. 

If you have any questions or are interested in our services, do not hesitate to reach out to us.

small_blog-prettier_Lukasz_cover_high.png

thumbnail_blog-prettier_Lukasz_cover_high.png

blog-prettier_Lukasz_cover_high.png

How to make your code better with Prettier?

React Native teams

Backend teams

React.js & TypeScript teams

Migrations to React.js

End-to-end product development

PoC and MVPs

CTO as a service

Software audits

Process consulting

Services - Frontend engineering

Services

asdasdas

Case Studies

HRtech

EdTech

Expertise

Career

The Team

Company

About us

Blog

Over the past year, we’ve been keenly observing the developments at Shopify. For companies specializing in React frontend development like Bitnoise, e-commerce agencies, and web stores these changes are intriguing.

**The big breakthrough** I am talking about was definitely Shopify’s acquisition of [Remix](https://remix.run/)
. On the surface, it may have been strange, as the e-commerce giant already has their own frontend technology called [Hydrogen](https://hydrogen.shopify.dev/)
. 

But it actually makes a lot of sense. Here’s why.

#### **What is Hydrogen?**
Shopify's Hydrogen is a front-end development framework that provides a set of tools for building custom storefronts on Shopify's e-commerce platform. **Hydrogen is built on top of React** and is designed to provide a flexible and performant developer experience. The framework provides a number of features, including a declarative router, a powerful data management system, and a suite of pre-built UI components that can be used to quickly build out custom storefronts.

#### **Why Shopify acquired Remix?**
Shopify has acquired Remix, an open-source web framework start-up similar to Next.js, to bolster its storefront design tools. The financial terms of the acquisition were not disclosed, but Remix CEO [Michael Jackson](https://www.linkedin.com/in/mjijackson/)
 (not the Michael Jackson) said that the company will receive long-term support and backing from Shopify to help it grow faster and focus on performance and scalability. 

**Remix is designed to leverage distributed systems and native browser features while abstracting away back-end server tasks, and can prefetch elements of a web page in parallel to minimize page loading.** One of its key features is its compatibility with public cloud environments, including Amazon Web Services, Google Cloud, Netlify, Vercel and Cloudflare Workers.

![ ](\uploads\blog-Remix_Hydrogen_Shopify_post01_5RAFqGZsUWzGL0wX3HBlW8.jpg)
#### **Does this mean phasing out of Hydrogen?**
I really don’t think so. Neither do Shopify executives.

According to Shopify’s VP of Engineering Dion Almaer, Remix is expected to become a significant feature of Shopify's developer platform over time. He said the acquisition would benefit both Shopify developers and merchants **by bringing improvements to Hydrogen**, the company’s front-end web development framework for building custom Shopify storefronts.

In short, by acquiring Remix, Shopify **has added a valuable asset to its developer platform**, and it will be able to enhance its own storefront design tools by leveraging Remix's capabilities.

Here are some areas where improvements are taking place.



#### **Data loading**
Data loading is one of the core improvements that Shopify aims to introduce to Hydrogen by leveraging Remix's capabilities. With Remix, the company has been able to improve data loading by keeping **a clear separation around where the server is doing the work**, and worrying less about how the server and client components might mix together. Remix has introduced a route-level data loader that runs on the server instead of React Server Components, which presents a performance risk for developers and bottlenecks for progress. The route-level data loader has proven to be an ideal solution for the performance and resiliency of merchants' websites, and it has resulted in a simpler developer experience that's less prone to mistakes.

#### **Routing**
Routing is another area that Shopify is aiming to improve by leveraging Remix's capabilities. With React Router not supporting RSC in Hydrogen, Shopify implemented its **own declarative and file-based router**, which critically missed granular error boundaries and nested routing. Remix's router has introduced an innovative approach to nested routing, and an upcoming API supporting React 18 Streaming that complements Hydrogen's routing solution with a simple way to prioritize streaming data. Remix's router has a more intuitive way to provide a consistent layout component for the shell of a website, and a catch-all route with "$" means pages like a 404 get a dedicated place in a file structure instead of being referenced inside App.server.

#### **Error Handling and loading fallbacks**
Error handling and loading fallbacks are another area that Shopify aims to improve by leveraging Remix's capabilities. Nested error boundaries are a new feature that Shopify has introduced to Hydrogen, which means that only the parts of the page related to the issue will respond differently. This feature allows for a more contained issue that provides helpful messages to **turn a potentially negative customer experience into a positive one**. Hydrogen also makes it much easier to spot bugs before they ship with robust **support for linting, TypeScript, and unit testing**, but mistakes are a reality of development. Error boundaries allow for crafting each message and fallback UI for individual parts of each page related to distinct fetch requests and allowing crafting the message for whatever status code you want to throw. When you combine this with the upcoming Streaming support and defer API and the ability to get data from parent routes without Providers, things get very powerful without getting complicated.

#### **Mutations & State**
Shopify aims to ensure that the purchase path is as performant as possible, that shoppers can easily pick back up where they left off, and that they can easily share links with their friends when they want to recommend a product. Mutations and state are the most important pieces of building a high-converting storefront, but they're also some of the hardest things to get right. Shopify has added features like a RSC-based mutation API and a Form component, but they're not as full-featured as the company would like. With Remix's useMatches, useSearchParams, and useFetcher, Hydrogen will support Optimistic UI, making add-to-carts feel instantaneous. The Hydrogen Pagination component will provide simple and flexible APIs for working with paginated Storefront API queries like product grids, search results, and order history.

#### **Conclusion**

At Bitnoise, we've been big fans of Remix since its early days and we're excited to see Shopify incorporating its framework to enhance its storefront design tools. With these changes, Shopify developers and merchants can look forward to an improved user experience, increased productivity, and enhanced performance. 

We believe that these changes will play a crucial role in the future of e-commerce, and we're thrilled to be a part of it!

small_blog-Remix_Hydrogen_Shopify_cover_high.png

thumbnail_blog-Remix_Hydrogen_Shopify_cover_high.png

blog-Remix_Hydrogen_Shopify_cover_high.png

How does Remix enhance Hydrogen, Shopify's front-end development framework?

In this blog post, I will explore the responsibilities and significance of a Chief Technology Officer (CTO) role in startups and scaleups and the factors that should be taken into account when deciding between employing an in-house CTO or opting for the services of an external consultant ([CTO as a Service](https://www.bitnoise.pl/services/cto-as-a-service)
). 

**Let's begin with a fundamental question: What is the role of a CTO and what does their operational environment encompass?**

My focus will center on two primary contexts: startups during their initial financing and development phase, and established organizations during the scaling phase. While I acknowledge the existence of other possibilities, the purpose of this post is to offer insights rather than provide an exhaustive list of technological roles. Furthermore, I assume that the distinction between CTOs and Tech-Leads is less significant at this stage, as these roles often interchange and the nomenclature arises more from chance than deliberate decision-making.

#### **The most important qualities of a good CTO**
A Chief Technology Officer (CTO) is a highly skilled professional who assumes overall responsibility for the technological aspects of your startup. They bring extensive experience and expertise in understanding the inner workings of your solution and delivering value to end-users. However, it is essential to consider additional dimensions of this role.

**CTOs come from diverse backgrounds, often having held positions as software developers, tech leads, DevOps specialists, project managers, or even academic personnel.** Within your startup, their responsibilities may encompass technological leadership, research and innovation, business and technology development, product development, and the recruitment of key technical specialists.

Given the wide range of competencies required, finding the right person for the job can be challenging. During the MVP stage, when numerous pressing issues demand attention, the decision to hire a CTO can be overlooked. However, as your startup progresses beyond the MVP stage, effective technological management becomes crucial, especially when addressing any technical debt accumulated during the initial product phase.

What are the most important qualities of a good CTO?

**A leader in technology** 

The CTO plays a critical role in making architectural decisions, ensuring infrastructure scalability, and selecting the most effective tools to achieve both client and company objectives. They may also have greater control over the implementation of tech solutions. 

**Research & development for innovative solutions** 

The CTO holds a unique position in driving innovation by defining key directions for technological advancements. They inspire and motivate teams to think creatively, fostering an environment that encourages innovative ideas and thinking outside the box. 

**Hiring Talent**

Finding qualified candidates in the IT industry can be increasingly challenging. Involving the CTO in the recruitment process for development teams can enhance efficiency and satisfaction for both parties, as they possess the technical expertise to identify suitable candidates. 

**Product & development**

As the representative of the tech team, the CTO must effectively demonstrate how innovation and technology align with customer needs. Collaborating closely with the Chief Product Owner, the CTO ensures the creation of tech-enabled products that meet market demands. 

**Business & technology enabler** 

Working closely with both the in-house tech team and clients, the CTO serves as a bridge between business requirements and technical execution. Their deep understanding of both domains allows them to effectively translate business needs into a comprehensive technical plan.

Having identified the key qualities of a competent CTO in a startup, let us now shift our attention towards examining the benefits and drawbacks of employing an in-house candidate versus opting for the expertise of an external specialist.

#### **Pros and cons of in-house CTO** 
The in-house solution for a CTO has its own advantages and disadvantages. On the positive side, having an in-house CTO provides proximity and familiarity with the organization, but it can be costly. It is particularly beneficial for complex projects involving big data, AI, or large data volumes, whereas it may not be cost-effective for less advanced applications. 

An in-house CTO holds a crucial role within the organization as they possess extensive knowledge of internal processes, strategies, and the target market for product development. This internal perspective fosters a sense of organization, motivation, and deep involvement among team members. Furthermore, this model offers the advantages of high flexibility, simplified organization of agile workflows, and reduced response times for quick issue resolution.

![ ](\uploads\Blog-post_recyklning_ebooka_01_post01_3Ee3fEqUXYzqHJZIusGPIv.png)
#### #### **Pros and cons of CTO as a Service**
CTO as a service provides several advantages and disadvantages. The outsourced CTO is responsible for managing your company's technologies, engineers, IT support, and tech partners, ensuring proper diligence operations. They can work on a part-time, full-time (for a specific project or the entire company), or hourly basis, offering flexibility in decision-making. CTO outsourcing services are particularly beneficial for medium and small companies that don't require a permanent CTO but still need temporary leadership and technical supervision during specific software development cycles or for developer teams. Additionally, CTO as a Service is generally more cost-effective than hiring a full-time expert.

![ ](\uploads\Blog-post_recyklning_ebooka_01_post02_2IDrEsR6eIvGLMp07rarvM.png)

Naturally, the process of hiring a competent CTO poses its own set of challenges, and this blog post may not provide a definitive answer regarding the ideal CTO fit for your business. However, it can certainly help you evaluate the stage of your journey and identify experts best equipped to assist you in progressing further. Several crucial considerations need to be made when determining the type of CTO you require and the necessary skill set: 

1. **Business partner or technical manager:** Do you need a business partner with technological expertise to scale the business, or someone solely focused on managing the technical aspects without involvement in other areas of company development?

2. **Development stage:** Is your business in the early stages, requiring process organization and alignment of business goals with technology? Or are you post-MVP, seeking someone to plan and lead further technological development while building a reliable team? 

3. **Future goals:** If you plan to outsource part or all of your technological team in the future, an in-house CTO would be advantageous. However, if you already have a skilled team and only require part-time technical leadership, CTO as a Service may be sufficient. 

4. **Budget:** Consider the financial resources you are willing to allocate to the CTO position. 


Once you have determined the ideal solution for your organization, you can begin searching for suitable candidates or outsourcing services. 

___
#### **Summary** 
In this blog post, we explore the role of a Chief Technology Officer (CTO) in startups and scaleups and discuss the decision between hiring an in-house CTO or using a CTO as a Service. A good CTO possesses leadership in technology, drives innovation, helps in hiring talent, oversees product development, and acts as a bridge between business and technology.

Having an in-house CTO offers proximity and familiarity but can be costly, while CTO as a Service provides flexibility and cost-effectiveness for smaller companies. Factors to consider include whether a business partner or technical manager is needed, the development stage of the business, future goals, and budget.

Ultimately, finding the right fit for your organization requires careful consideration. Once you determine the ideal solution, you can start searching for suitable candidates or outsourcing services.

If you found this article interesting, we invite you to explore our ebook tailored for CEOs, founders, and product managers. It offers invaluable insights into the product development process, providing you with valuable knowledge and expertise.

[Link: The Product Journey: building application that scale](https://theproductjourney.bitnoise.pl/#form)




small_how-does-remix-enhance-hydrogen-shopify-front-end-development-framework.png

thumbnail_how-does-remix-enhance-hydrogen-shopify-front-end-development-framework.png

how-does-remix-enhance-hydrogen-shopify-front-end-development-framework.png

CTO as a Service or in-house CTO? Which is best for you?

**AngularJS has no future. You know it, and I know it. There is no longer any support as of 2023, and developers try to stay as far away from it as possible. The problems of companies still using it are piling up.**

So if by any chance you are still using AngularJS, I don't think I need to convince you any further that it has to go. And it has to go now.

But let's dive deeper into the hard truth, explore alternative tech solutions, and see how you can prepare for the switch.

#### **AngularJS vs React - a quick overview**
Before exploring an overview of alternatives and discussing the pros and cons of switching to them, I want to highlight some compelling facts that demonstrate why it is time to make the switch now and, in many cases, why opting to adopt [React](https://react.dev/)
 is a wise decision.

1. Above all, the support for **AngularJS officially ended in January 2022**. Furthermore, it's worth highlighting that Angular versions v2 to v13 are no longer receiving official support.

2. The drop in interest in Angular and the surge in popularity of React among developers is evident in the latest [**Stack Overflow Annual Developer Survey 2023**](https://survey.stackoverflow.co/2023/)
. According to the survey data collected among professional developers, **React garnered a significant 42.87% share** in terms of web frameworks and technologies. In comparison, Angular lagged behind at 19.89%, while AngularJS only accounted for 7.96% of the responses. These statistics demonstrate the shifting preferences and increasing adoption of React among the developer community.

3. React stands out in terms of DX (**Developer Experience**) due to its remarkable attributes, such as user-friendliness, adaptability, quicker rendering through the use of virtual DOM, top-notch performance, and efficient testing capabilities.

4. **React has a thriving community and ecosystem**. While both React and Angular have strong communities, React's community is generally considered more dynamic. Moreover, React's ecosystem is lively, offering developers countless tools, libraries, and resources.

5. Last but not least, **React Native**. If you are also contemplating mobile app development, React might be a preferable choice due to React Native. This framework enables the creation of efficient native mobile apps using JavaScript while also granting access to native features. React Native is a descendant of React, not just in name but also in syntax and approach. For developers acquainted with React, implementing React Native is straightforward.


![ ](\uploads\Blog_AngularJS2React_2_18PLXBAKIQXgPnPyVt0gNw.png)
#### **Leaving AngularJS behind - React and other alternatives**

When you decide to move on, you might think that the simplest solution is to migrate to Angular if you have worked with AngularJS. Overengineering and overthinking the technology can be a detrimental factor when it comes to agility and fast implementations.

However, there is more to consider than meets the eye. **Migration entails a significant effort in terms of technology, budget, team engagement, project management, and more.** So, if you decide to proceed, take a moment to think outside the box and check other technologies.

Having said that, I will present three migration solutions and one temporary solution. I will discuss the advantages and disadvantages of Angular, Vue, React, and even staying with AngularJS (although I do not recommend it).

#### **Pros and cons of migrating to Angular**
Benefits after migrating:

1. **TypeScript integration:** Angular is built with TypeScript as its primary language, which brings static typing, better tooling, and enhanced code reliability. TypeScript allows for simpler refactoring, provides code navigation features, and catches errors during transpile-time, resulting in more robust and maintainable code.

2. **Improved performance**: Angular introduces various optimizations and enhancements in performance compared to AngularJS. It leverages a more efficient change detection mechanism, resulting in faster rendering and better overall application performance.

3. Angular provides a more **structured and component-based architecture**, making it easier to manage and maintain code. It offers improved tooling, TypeScript support, and better IDE integration, boosting developer productivity.


Cons of the migration process:

1. **Learning curve:** Angular and AngularJS have significant disparities in architecture and concepts. Migrating to Angular requires developers to learn new concepts, such as the component-based architecture, dependency injection, and reactive programming with RxJS. This initial learning curve may slow down development initially.

2. **Potential breakage:** AngularJS and Angular have different APIs and approaches, which can lead to possible breaking changes during the migration process. Some AngularJS features might not have direct equivalents in Angular, requiring developers to find alternative solutions or workarounds.

3. **Upgrading dependencies:** Angular often necessitates upgrading dependencies to their latest versions, including TypeScript, RxJS, and other libraries. This can introduce compatibility issues with existing code or third-party libraries that rely on older versions.


#### **Pros and cons of migrating to Vue**
Benefits after migrating:

1. **Improved performance**: Vue is recognized for its lightweight nature and efficient rendering mechanism. Migrating to Vue can result in faster load times and enhanced overall performance compared to AngularJS.

2. **Simplicity and ease of learning:** Vue has a straightforward and more intuitive syntax compared to AngularJS, making it easier for developers to understand and learn. This can result in faster development cycles and less steep learning curves for new team members.

3. **Component-based architecture:** Vue follows a component-based architecture similar to Angular, allowing for better code organization, reusability, and maintainability. Migrating to Vue can enable developers to harness the advantages of component-based development with a more streamlined and flexible approach.


Cons of the migration process:

1. **Compatibility issues:** Migrating from AngularJS to Vue involves rebuilding the existing codebase, which can be time-consuming and challenging. There may be compatibility problems with third-party libraries or custom directives that need to be addressed during the migration process.

2. **Tooling and ecosystem differences:** AngularJS has its own set of tools, libraries, and ecosystem built around it, which may not have direct counterparts in the Vue ecosystem. This can lead to the need for modifications in the development workflow and the adoption of new tools and libraries.

3. **Migration complexity:** Depending on the size and complexity of the existing AngularJS application, the migration process can be complex and require meticulous planning. It may be necessary to incrementally migrate components and features, leading to a mixed codebase during the transition phase.



#### **Pros and cons of migrating to React**
Benefits after migrating

1. **Performance and scalability:** React is renowned for its performance optimizations, such as the virtual DOM, which can lead to faster rendering and improved overall performance compared to AngularJS. React's component-based architecture also promotes scalability, allowing for effective handling of large and complex applications.

2. **Flexibility and modularity:** React provides a high degree of flexibility, allowing developers to choose libraries and tools according to their needs. The component-based nature of React enables enhanced code organization, reusability, and maintainability. React's unidirectional data flow and the use of pure functions for components also promote simplified testing and debugging.

3. **Larger community and ecosystem:** React has a vast and active community, which means a wealth of resources, libraries, and support available. This expansive ecosystem makes it easier to find solutions to common problems, integrate with other tools and frameworks, and stay up to date with best practices.

4. **Improved developer experience:** React has a moderate learning curve, especially for developers already familiar with JavaScript. The declarative nature of React simplifies the development process, and the availability of tools like React Developer Tools enhances productivity and eases debugging.



Cons of the migration process:

1. **Rewriting and time consumption:** Migrating from AngularJS to React typically involves a complete rewrite of the application. This process can be time-consuming and resource-intensive. Additionally, developers who are accustomed to AngularJS will need to learn React and its ecosystem, which may require extra training and adaptation time.

2. **Tooling and ecosystem differences:** AngularJS and React have different tooling and ecosystem support. This means that developers will need to adapt to distinct development workflows, build systems, and libraries specific to React.


And if you really need to stay with AngularJS, you can always rely on the helping hand of a third-party company, like XLTS, which currently plans to provide support for AngularJS through at least 2026. Remember that it is not a perfect solution, but when you have a stable application and no need for growth, it may suffice for a while.

**But let's face it, there is only one business-oriented solution on the table, and it is migration. The sooner, the better.**

I've shown that there are pros and cons to every technology you will use, but most of them sum up to the problem with the learning curve, tools, and ecosystem differences (even in the case of Angular).

The solution can be a hybrid migration, and I know from experience how it works because we did it for our clients with success.

#### **It really works! - A** [**case study**](https://www.bitnoise.pl/clients/circus_street)
 **on how Circus Street switched from AngularJS to React without losing momentum.**
To demonstrate how you can smoothly transition without losing momentum, I present to you a real-life example where we migrated an entire e-learning platform for our client, Circus Street. They are a provider of online training in digital skills, specifically designed for global enterprises.    

**Needs and problems** 

Circus Street approached us for help in maintaining their main web application, which was built on AngularJS. However, the imminent end of support for AngularJS in 2022 posed a problem for Circus Street, as they needed a solution that would allow them to introduce new features quickly without affecting the quality of service for their clients. We identified several pain points in Circus Street's application. The monolithic structure and outdated version of AngularJS made it challenging to implement changes efficiently. Additionally, the interconnectedness of the web and mobile applications meant that fixing one required addressing both simultaneously. The code structure also lacked flexibility, leading to longer implementation times for changes and fixes. 

**Solution and results** 

To address these issues, Bitnoise proposed using React, a technology Circus Street was already familiar with. **They considered two approaches: rewriting the entire application at once or using the Strangler Pattern to migrate gradually.** The latter approach was chosen, allowing Bitnoise to rewrite AngularJS components into React and progressively replace the old code. This process started with smaller components and culminated in replacing the AngularJS core, resulting in a seamlessly functioning final product. 

The achievements of the project included separating the mobile and desktop code for independent management, converting all AngularJS code to React and Redux, writing more flexible and maintainable code, implementing comprehensive tests and documentation, and facilitating onboarding for new developers. 

**As a result of Bitnoise's efforts, Circus Street successfully upgraded their application, meeting the deadline for the end of AngularJS support**.

![ ](\uploads\case_study_linkedin_1o8iIJJTUYcwVCgNaUVCI8.png)
You can find the full case study under the link: [Circus Street](https://www.bitnoise.pl/clients/circus_street)
.

#### **How to plan a switch from AngularJS to React - most important steps and takeaways**
I assume that we are now on the same page regarding the migration to React. I've presented a case study from a successful project and highlighted a pain point our client experienced before switching to React. Let's summarize the general steps necessary for the transition. Please bear in mind that this is just an overview, as a fully technical manual is a topic for another article.

1. **Plan and analyze the migration:** before diving into the migration process, it's crucial to plan and analyze the existing AngularJS application thoroughly. Evaluate the application's structure, components, dependencies, and complexity. Identify any potential challenges and prioritize the components that require migration. This step helps in creating a well-defined roadmap for the migration process.

2. **Understand React fundamentals:** familiarize yourself with React concepts and principles. Understand how React handles component-based architecture, state management, routing, and rendering. This step ensures a smoother transition and helps you make knowledgeable decisions while rewriting AngularJS components in React.

3. **Rewrite AngularJS components in React:** initiate migrating individual components from AngularJS to React. Commence with less complex components and gradually move to more complex ones. Divide larger components into smaller, reusable React components. Utilize React's virtual DOM and JSX syntax to rebuild the functionality and UI of AngularJS components in React.

4. **Migrate data and state management:** AngularJS uses two-way data binding, while React follows a unidirectional data flow. Choose an appropriate state management solution for your React application, such as React's built-in state management (useState) or a more advanced library like Redux or MobX. Migrate the data and state management logic from AngularJS to the chosen React state management solution.

5. **Test and refactor:** thoroughly test the migrated components and functionalities to ensure they work as expected in the React environment. Use unit testing frameworks like Jest or Enzyme to write tests for your React components. This step helps uncover any issues or bugs that might have arisen during the migration process. Revise the code if necessary, applying React best practices and optimizing performance.


#### **Conclusion**
The time to switch from AngularJS to React is now. This decision is driven by several compelling factors, including:

-  AngularJS's official support ended in January 2022.

- React is leading in popularity among web frameworks, according to the Stack Overflow Annual Developer Survey 2023.

- React's benefits, such as improved performance, scalability, flexibility, and a thriving ecosystem, make it an attractive choice for developers and businesses.

- React Native offers a smooth transition for those looking to expand into mobile app development.


Of course, there are drawbacks to migration, including the learning curve and potential breakages. However, these challenges can be overcome with careful planning and gradual migration approaches.

Transitioning from AngularJS to React is not only necessary due to the end of support for AngularJS, but it also offers significant advantages in terms of developer preference, improved productivity, and mobile app development.



small_Blog_artykul_AngularJS2ReactJS_cover_high.png

thumbnail_Blog_artykul_AngularJS2ReactJS_cover_high.png

Blog_artykul_AngularJS2ReactJS_cover_high.png

AngularJS to React: why the time to switch is now?


How to make your code better with Prettier?

Łukasz

How does Remix enhance Hydrogen, Shopify's front-end development framework?

Łukasz

CTO as a Service or in-house CTO? Which is best for you?

Łukasz

AngularJS to React: why the time to switch is now?

Łukasz

GET IN TOUCH