Frontend
Frontend
Techniques
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: NestJs is a framework for building efficient, scalable Node.js web applications. It is an open-source Node.js framework for developing challenging backend systems that use the design paradigm convention over configuration that eliminates the need for explicit configuration by allowing developers to utilize common tools and code in a particular way. It gives you true flexibility by allowing use of any other libraries thanks to modular architecture. An adaptable ecosystem that is a fully-fledged backbone for all kinds of server-side applications. And it takes advantage of latest JavaScript features, bringing design patterns and mature solutions to Node.js world. NestJs is created for both Monoliths and Microservices. NestJs’s documentation is one of the most thorough and understandable by quickly scanning the documentation, you can find the answer to your bug and cut down on the amount of time spent debugging. In NestJs everything can be controlled with decorators. You can connect a controller to a collection of routes, specify a request method, add request body content or parse request parameters. You can also create your own custom decorators to use inside your project. With NestJs you may construct domain-wise clear boundaries, write reusable modules, and write loosely coupled and maintainable code. NestJS was used in Bitpanda.
Insight: Pinia is a new state management library for the Vue ecosystem. As a state manager, it fulfils the same function as Vuex and many other libraries with the same purpose, although in this case, Pinia is official and has the support of the team in charge of Vue. It is intuitive, stores are as familiar as components. API designed to let you write well organized stores. Reacts to store changes to extend Pinia with transactions, local storage synchronization, etc. Types are inferred, which means stores provide you with autocompletion even in JavaScript! Build multiple stores and let your bundler code split them automatically. Pinia hooks into Vue devtools to give you an enhanced development experience in both Vue 2 and Vue 3. And Pinia weighs just ~1.5kb
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.
