small_avatar_AdrianR3.png

thumbnail_avatar_AdrianR3.png

avatar_AdrianR3.png

Adrian

GET IN TOUCH

![blog-_grafika1 brzydki hacker.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_grafika1_brzydki_hacker_d21723680e.png)

Every time I think about web application security, OWASP comes to mind. What is OWASP?

![blog-l grafika 2-logo owasp.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_l_grafika_2_logo_owasp_60c12ece3d.png)



OWASP stands for the Open Web Application Security Project. It is a nonprofit organization that focuses on improving the security of software. OWASP provides freely available tools, documentation, and resources for developers, security professionals, and organisations to improve the security of their web applications.

One of the key contributions of OWASP is the OWASP Top 10, which is a regularly updated list of the top ten most critical security risks facing web applications. This list helps developers prioritise their security efforts and address the most pressing vulnerabilities.

Any application built on top of an existing LLM or GenAI is essentially a web application, so OWASP also monitors this aspect. Let's explore the top 10 potential security risks when deploying and managing Large Language Models.

#### Prompt Injection

![blog-_grafika3 strzykawka.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_grafika3_strzykawka_f05b3ac29e.png)

**What is it?**
The Prompt Injection Vulnerability arises when an attacker manipulates a large language model (LLM) using carefully crafted inputs, thereby causing the LLM to carry out the attacker's objectives unwittingly. This manipulation can occur either by directly breaching the system's prompt or indirectly through manipulated external inputs, which may result in various concerns such as data theft, social engineering, and other related issues.
		
**How it’s working?**
An attacker could inject biased language or leading questions into the prompts given to a language model, causing it to generate outputs that promote misinformation, hate speech, or other undesirable content.
    
**Real world example**
Application for HR, which uses an LLM to check if the uploaded CV fit the needs.
	    
In this example, a malicious actor uploads a document containing hidden instructions—a prompt injection—to manipulate a Large Language Model (LLM). The document suggests it's an excellent job application. When processed by an unsuspecting user through the LLM, the injected prompt alters the LLM's output to praise the document's quality falsely. This demonstrates how prompt injections can deceive LLMs into producing biased or manipulated results, posing significant risks to data integrity and decision-making processes.
		
**Prevention**
Prompt injection vulnerabilities exist due to the inherent nature of LLMs, which do not differentiate between instructions and external data. Because LLMs use natural language, they treat both forms of input as equally valid. As a result, there's no fool-proof prevention mechanism within the LLM to mitigate prompt injection risks, but you can lower the impact using strategies like:
- Implement privilege control for LLM access to backend systems
- Incorporate human oversight to enhance functionality
- Separate external content from user prompts
- Regularly monitor LLM input and output manually


#### Insecure Output Handling

![blog-_grafika_4 zatruty dokument.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_grafika_4_zatruty_dokument_99b2add539.png)

**What is it?**
Insecure Output Handling involves inadequate validation, sanitization, and management of outputs generated by large language models before they're used elsewhere. It can lead to XSS, CSRF in web browsers, as well as SSRF, privilege escalation, or remote code execution on backend systems.

**How it’s working?**
In the scenario where LLM output is directly inserted into a system shell or a similar function, it can lead to remote code execution. This means that if the LLM generates code or commands that are executed by the system, an attacker could potentially manipulate the LLM to produce malicious code, leading to unauthorized actions on the system, such as accessing sensitive data or compromising its security.
    
**Real world example**
A website which can share generated LLM content between different users
  
In this scenario, a web application utilizes a Large Language Model (LLM) to generate content based on user text prompts without properly sanitizing the output. This lack of output sanitization means that the content produced by the LLM is not checked for potentially malicious code or scripts before being presented to users.

An attacker could exploit this vulnerability by submitting a carefully crafted prompt to the web application, causing the LLM to return an unsanitized JavaScript payload as part of the generated content. When this content is rendered in a victim's browser, the embedded JavaScript payload executes, leading to a Cross-Site Scripting (XSS) attack.

**Prevention**
- Treat the model as any other user
- Follow the other good practices for input validation and sanitization
- Encode model output to mitigate undesired code execution by JS or Markdown


#### Training Data Poisoning

![blog-_grafika5 lejek złych i dobrych danych.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_grafika5_lejek_zlych_i_dobrych_danych_84e01ece02.png)

**What is it?**
The critical aspect of any machine learning method lies in its training data, often referred to as "raw data." This data should encompass various domains, genres, and languages to achieve high capabilities, such as linguistic and worldly knowledge. Large language models utilise deep neural networks to generate outputs based on patterns learned from training data.

Training data poisoning involves manipulating pre-training data or data used in fine-tuning or embedding processes to introduce vulnerabilities, backdoors, or biases that could compromise the model's security, effectiveness, or ethical behavior. Poisoned information may surface to users or create risks like performance degradation, downstream software exploitation, and reputational damage.

**How it’s working?**
In this context, a malicious actor or a competitor brand intentionally creates inaccurate or malicious documents that are included in the dataset used for a model's pre-training, fine-tuning, or embedding processes.
	
This action is intended to manipulate the model's learning process, potentially leading to several adverse outcomes:
- Bias Introduction
- Model Degradation
- Security Risk
- Reputation Damage


**Real world example**
Brand A implemented a chatbot powered by a Large Language Model (LLM), designed to provide quick and efficient customer assistance with their inquiries and technical issues.
	
Competitor Brand B, seeking to undermine Brand A's reputation and gain a competitive edge, devises a nefarious plan. Brand B infiltrates the training data of a machine learning model. This could be done by injecting documents containing misinformation, biased content, or even malicious code.
		
As a result of the injected false training data, Brand A's chatbot begins to exhibit erratic behavior. It provides incorrect answers to customer questions, offers inappropriate solutions to technical problems, and, in some cases, may even respond with offensive or nonsensical replies.
	

**Prevention**
- Verify the supply chain of the training data
- Verify your use-case for the LLM 
- Ensure sufficient sandboxing through network controls is present to prevent the model from scraping unintended data sources
- Use strict vetting or input filters for specific training data
- Testing and Detection


####  "With great power comes great responsibility"

![blog-_grafika6 superhero.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_grafika6_superhero_c5558433a6.png)

As Large Language Models (LLMs) become increasingly integrated into various applications, it's crucial to recognize their potential security vulnerabilities. While LLMs offer immense power and capabilities in natural language processing, they also introduce significant threats to application security.

In this article, we explore the top three security vulnerabilities associated with LLMs. These vulnerabilities can include prompt injections, output handling flaws, and training data poisoning. Each poses unique risks, ranging from unauthorized access to sensitive data to the introduction of biased or malicious outputs.

It's essential to understand that LLMs are not standalone entities but integral parts of application infrastructures. Therefore, addressing their security vulnerabilities is paramount for safeguarding overall system integrity.

To mitigate these risks effectively, companies and development teams are encouraged to stay informed about emerging security issues related to LLMs. Reading reports from organizations like OWASP can provide valuable insights into best practices and strategies for securing LLM implementations.

In conclusion, while LLMs offer transformative capabilities in natural language processing, they also bring significant security challenges. By remaining vigilant and proactive in addressing these vulnerabilities, organizations can harness the power of LLMs while minimizing potential security risks.


Read more:
https://owasp.org/www-project-top-10-for-large-language-model-applications/


large_blog-hey gen_cover_high.png

medium_blog-hey gen_cover_high.png

small_blog-hey gen_cover_high.png

thumbnail_blog-hey gen_cover_high.png

blog-hey gen_cover_high.png

Top 3 security vulnerabilities for Large Language Models

Frontend Engineering

UX/UI Design

Research & Discovery

AI For Your Business

Services

Case Studies

Career

About us

Blog

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?

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?


![blog-AI ŁUKASZ R_grafika 1_WSTĘPpng.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_AI_LUKASZ_R_grafika_1_WSTE_Ppng_b7da5fba06.png)

Having nurtured a passion for technology from a young age, I've developed a keen understanding of its potential to streamline processes and enhance productivity. It's easy to assume that the utility of available market tools is universally recognized; however, I am aware that the true value of these resources may not be immediately apparent to everyone. Many of these accessible solutions can significantly benefit your business. Allow me to provide a concise overview of several key strategies you can implement immediately. Remarkably, you can leverage many of these solutions without the need for extensive technical knowledge or the employment of engineers.

So, let's dive in.

#### Applications and services

![blog-AI ŁUKASZ R_LOGO-CHAT GPT MIDJOURNEY.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_AI_LUKASZ_R_LOGO_CHAT_GPT_MIDJOURNEY_421841dac2.png)

Let's start with the dedicated tools that you, as a business owner, can begin using even today. There are two types of integrations:

##### **Direct**

There are already a few tools that I can recommend for you to start using. Some of them are obvious, and some are not.

You can start with popular AI tools like:

- **ChatGPT**: It can assist you in various ways, including automating customer service through intelligent and responsive communication, providing content creation for marketing materials, aiding in data analysis by summarizing large volumes of text, and enhancing productivity by answering queries and generating reports.
    
- **Midjourney**: This tool focuses on generating high-quality visual content. It could be a game-changer in areas like marketing, branding, and product development. It enables the rapid creation of visual assets, helping you enhance your online presence, attract more customers, and effectively communicate your brand message.

Or you can dig deeper and try using some less popular tools like:

- **HeyGen**: Helps you create avatars and multilingual voices for videos. It's a cost-effective and time-saving solution, eliminating the need for traditional, resource-intensive video production methods. Its user-friendly nature makes high-quality video production accessible, even for those without technical expertise. Adopting this AI-driven approach can significantly enhance your marketing efforts.
[Check out Dominika's article about HeyGen. ](https://www.bitnoise.pl/blog/beyond-language-borders-with-HeyGen)

- **MacWhisper**: This tool can quickly and easily transcribe your audio files into text using OpenAI's state-of-the-art transcription technology, Whisper. Whether you're recording a meeting, lecture, or any other important audio, it accurately transcribes your files into text.

##### **Indirect**

It's highly possible that you are already using some form of AI in your daily life, such as the autocomplete feature in your Gmail account, or you are using tools like Notion, which has already introduced support for text generation in its tool. You can [explore]( https://www.notion.so/help/guides/using-notion-ai) how it can improve your daily work. 


#### Prompt engineering

![blog-AI ŁUKASZ R_PROMPT.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_AI_LUKASZ_R_PROMPT_5f0817fd10.png)

It's highly likely that you've already engaged in prompt engineering, perhaps by experimenting with the capabilities of tools like ChatGPT, Dall-e, or Midjourney. But what exactly is prompt engineering?

Prompt engineering is the process of carefully designing and formulating prompts (inputs) to communicate with AI models effectively. The goal is to elicit the most accurate, relevant, and coherent responses from the AI. This involves understanding the AI's capabilities and limitations and crafting prompts that are clear, specific, and structured in a way that guides the AI towards providing the desired output. It's a crucial skill for effective AI interactions.

So, what can you do, and where can you seek advice? I would suggest the following:

- Start simple and observe the results.
- Don't be afraid; try new things and observe how the model reacts to your prompts.
- Seek inspiration by observing what others have done.
- Read official and community-based documentation, such as: [OpenAI's guide on prompt engineering](https://platform.openai.com/docs/guides/prompt-engineering) or a great example of multiple resources [here](https://roadmap.sh/prompt-engineering). An amazing guide can be found at [LearnPrompting.org](https://learnprompting.org/docs/intro).
- You can also exchange prompts with your team and build a unique internal knowledge base for your organization.


#### No-code integrations and automation

![blog-AI ŁUKASZ R_LOGO_MAKE-ZAPIERpng.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_AI_LUKASZ_R_LOGO_MAKE_ZAPIE_Rpng_339656f2f0.png)

There are several tools and services that you can start using with a little bit of knowledge, either by learning new things or by asking someone who is 'more technical' on your team. What can you do using these tools? You can automate your processes, leveraging, for example, ChatGPT to help you as one piece of your workflow puzzle. Imagine that every time you receive a new email, ChatGPT automatically checks the business context of this email. If it's, for example, some kind of critical situation (e.g., a system is down), you receive a direct notification via SMS or even a direct call where the bot reads you this email.

This is the easiest possible way to use different pieces of services, connect them with current AI capabilities, and optimize your internal processes on a daily basis for you or the business you are running.

You can check out platforms like [Make.com](https://make.com/), [IFTTT.com](https://ifttt.com/), or [Zapier.com](https://zapier.com/) if you are interested, or contact us so we can help you as well.

#### Foundation models

![blog-AI ŁUKASZ R_LOGO-OPENAI-LLAMA.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_AI_LUKASZ_R_LOGO_OPENAI_LLAMA_2e95e7b1f2.png)

This is the point where you will probably need an external or internal technical provider to help you utilize the currently available technology. But for now, I just want to give you a high-level idea of what you can achieve using Large Language Models (LLMs) for commercial or private use.

What is a foundation model?

A foundation model is a type of artificial intelligence model that is trained on a large, diverse dataset from a wide range of sources. These models are called "foundation" because they provide a broad, general understanding of the world, language, images, or other data types, which can then be fine-tuned or adapted for a wide variety of specific tasks without needing to be trained from scratch for each new task.

So, you can use commercial models like the one provided by OpenAI or utilize open-source models like Mistral or Lama. However, using them relies on large, universal datasets of data that were used to train the model.

How can you use Large Language Models (LLMs) with your own data? There are two options that we have already built for our internal needs, both of which are based on our internal knowledge.

#### Finetuning

![blog-AI ŁUKASZ R_grafika 2_FINETUNING.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_AI_LUKASZ_R_grafika_2_FINETUNING_c7c57f8119.png)

It's a process where a pre-trained model is further trained on a smaller, specific dataset to adapt it for a particular task. This process leverages the broad knowledge the model has acquired during its initial extensive training on a large and diverse dataset, allowing it to quickly learn the nuances of the new task with relatively few additional examples.

This approach is efficient and effective, requiring less data and computational resources than training a model from scratch for each new task.

You can think of it as creating a general model tailored to your specific needs or specialized tasks within various industries. It still requires data for training and resources with computing power to fine-tune the model, but the process takes only minutes or hours rather than weeks or months, as is the case with foundation models.

How can you use it in your business?
- Chatbot for Customer Service - Fine-tuning a foundation model on a dataset specific to a company's products or services can create highly effective chatbots for customer service.
- Personalized Education - Educational content can be used to fine-tune models to create personalized tutoring systems that cater to the unique learning styles and needs of individual students.
- Sentiment Analysis - Companies can fine-tune models on customer reviews, social media posts, and other feedback to perform sentiment analysis tailored to their products or services.

But you may ask, what if my data is constantly changing or if I need to analyze large documents on a daily basis? The idea of fine-tuning the model for each document might seem impractical. This is where we can introduce another idea:

#### RAG architecture

![blog-AI ŁUKASZ R_grafika 3_RAG.png](https://btnw-strapi-prod.dev.btndev.space/uploads/blog_AI_LUKASZ_R_grafika_3_RAG_dfb81670f3.png)

It is an innovative approach that combines the best of two worlds in natural language processing: retrieval-based and generative models. It was introduced to enhance the ability of generative models to produce more accurate, relevant, and informed content by leveraging external knowledge sources.

How can it help you?

One of the examples we've already built for our internal needs is a Knowledge-Enhanced Chatbot - imagine a bot on your Slack/Teams/whatever which can provide detailed, accurate, and contextually relevant responses to user queries by fetching information from a vast database of domain-specific knowledge. This capability makes it particularly useful in areas where expertise and up-to-date information are crucial. The domain doesn't really matter so it could be useful in:
- **Education**: Assisting in learning and research by sourcing detailed explanations, examples, and references from educational materials.
- **Finance**: Providing personalized investment advice by accessing real-time market data, financial news, and analysis reports.
- **HR**: Can automate the initial screening process of resumes and applications by retrieving information from job descriptions, required qualifications, and ideal candidate profiles. It can then generate a summary or score for each applicant, highlighting how well their background, skills, and experiences match the job criteria.


#### But can I create my own LLM?

Yes, although it's unlikely that you would. You need time and money to collect data, training time can range from weeks to months. For example, GPT-3, with its 175 billion parameters, was trained for weeks on thousands of GPUs. OpenAI’s GPT-3 is rumoured to have cost around $4.6 million in direct computing costs. Building a foundation LLM is a resource-intensive endeavour that demands careful planning and significant investment.


At the same time, currently available tools for end users and engineering teams are more than sufficient to utilise Large Language Models (LLMs) to accelerate business processes, optimize our time, and automate tasks.

Top 3 security vulnerabilities for Large Language Models

Łukasz

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

How AI can supercharge your business in 2024 on multiple levels of your cost and effort

Łukasz

GET IN TOUCH