Insight: Basically what we get with Lenses is to reuse the data access of a structure in a modular and immutable way, either to obtain the data or to modify it. Also, with the composition of Lenses we will be able to reach the most profound data within our structure in a simpler way.
Insight: Despite being widely used today, Webpack is still a black box for many developers who simply use an existing configuration without knowing how it really works. Using Webpack modules we can divide our code into different files, so that each file has a single responsibility, which will make our code much more understandable and easy to test.
Insight: Functional programming becomes critical when the focus is the ultimate result — what to solve rather than how to solve it. Functional programming leads to a more transparent, cleaner code that helps the user in debugging and maintenance, and is fast becoming the go-to method for developers.
Insight: React Query is a library that has 2 simple hooks which provide fetching, caching and updating asynchronous data in React applications. It is proven that it is very useful in server state management in React applications.
Some of the advantages that React-Query gives are:
– Configuring the stale, cache, retry delay time creating a queryClientConfig object.
– Updating the stale data in the background since react-query prefetches.
– Optimizing the requests to the backend.
– With the refetchOnWindowFocus feature, it can refetch in the background when the user changes the browser tab or when they come back to the app.
React query is a great tool to use in React applications to manage the server state, lazy loading, pagination and the cache maintenance. It has a simple approach and implementation. With its devtools support, it is clear to use also in more complex applications. After working with the projects which includes.
React/Redux where all the state is in local, React-Query saves so much boilerplate code and synchronizes local state with server.
React-Query was used in Nestlé.
Insight: BEMIT is simply BEM + ITCSS. Like BEM, it is a naming methodology to define the classes of the HTML nodes. Thanks to BEM, developers can know how classes are related to each other. BEM provides a system to communicate clearly the relationships between blocks and the elements contained in them, helping to create a standard. ITCSS offers a system to structure style files and helps to locate the rules defined in them, besides minimizing the inheritance and specificity conflicts that give so many headaches when project starts to grow, both in size and people. So, the idea is to add the ITCSS hierarchy system to BEM.
Insight: Microfrontends is an architectural style where independently deliverable frontend applications are composed into a greater whole. The micro-frontend architecture is a type of design applied to the frontend that allows us to divide it into smaller, individual and semi-independent applications that work together. This frontend concept is very much inspired by the microservices used mostly in the backend. The goal of this architecture is to see web applications as a composition of functionalities where each one is worked by independent teams. Each team has a specific business area and development is done end-to-end, from the database to the user interface.
Languages & Frameworks
Insight: Formik is the world’s most popular open source form library for React and React Native. Formik is a good fit for validation, keep track of visited fields and handling form submission. Formik uses controlled components. Since form state is kept localized and is managed by Formik it is good for building multi-step forms. Formik is useful to do in-place validation and give specific input format.
React Hook Form is performant, flexible and extensible form with easy-to-use validation. React Hook Form uses uncontrolled components. Since uncontrolled components keep the source of truth in the DOM, it is easier to integrate React and non-React code. React Hook Form isolates input components from the others and prevents re-render of the form for a single input. It avoids this unnecessary re-rendering. So it is a great advantage in terms of the performance. React hook form is great for simple forms and it does not have any dependencies. Formik & React Hook were used in Nestlé.
Insight: Next.js is commonly used by companies like Netflix, Twitch, or Uber. It is considered one of the fastest-growing React frameworks. With Next.js website can be rendered on the server side before sending it to the client. Next.js uses Hot Module Reloading (HMR) and is enabled by default. Next.js has built-in support for font and script optimization. Next.js has built-in support for internationalized routing and has out-of-the-box support for AMP. Next.Js was used in Bitpanda.
Insight: Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Since Angular is a framework, it offers many more functionalities than React, such as the handling of forms, the routing and the requests handling. Angular was used in Bitpanda.
Insight: Gatsby is an open-source Static Site Generator (SSG) that uses React for development, Webpack for bundling, and GraphQL for fetching CMS data. It allows you to get data from various resources, such as WordPress, Contentful, DatoCMS, and many more. Querying with GraphQL means that you can create custom requests declaratively, and it also gives you a full interface for creating, testing your queries, and previewing the results. Since Gatsby is React-based, it is possible to work on it as any other React application, with components, hooks, styling libraries, and so on, giving developers full control over the design and behavior. You can create your own design system and make use of it on your Gatsby website.