Connect with us

Publications

React Application Architecture: Code splitting [Part 2]

Published

on

Ilia Kniazev Hacker Noon profile picture

@iliakniazevIlia Kniazev

Software developer with a deep expertise in web-development. Current company – June Homes (ex. – Tinkoff Bank)

In the previous part, we I’ve shared my knowledge and experience about the components and how it affects our React app architecture.

Today we will dive deep into code-splitting: architectural approaches, microservices, and microfront-ends.

Architectural approaches

Every modern web-app uses JavaScript due to its open-source community, standards, applicability, tools and many other things which make JavaScript stand out from the crowd. In bunch of projects it leads to an increase in complexity, development time, testing time, release cycle and entry level for developers. Most often monoliths have such problems as they are large apps.

Monolithic architecture is an architectural approach which blends the main app logic and server-related code so that application consists of a one-layer combination of different components.

I have an extensive experience in developing monoliths and I found out several cons of handling them:

  • significant amount of legacy code
  • a lot of logic is mixed through the whole app
  • different components have similar naming
  • easy to brake something down
  • a bunch of duplicated code

Using micro-service architecture approach, instead of monoliths, we divvy up our app into a set of small, reusable modules that interact with each other on their own layers. One of the main advantages of a micro-services is that your apps becomes flexible and you can easily use oppropriate tech stack for every single task.

Moreover, with micro-services you can reduce testing and deployment time, app complexity, use modular approach and do different tasks in parallel. In case of UI development this approach is named as microfront-ends.

Microfront-end is an architectural approach during which independent applications are collected into one large application. It makes it possible to mix different widgets or pages written by different teams using different frameworks in one application (see the figure below).

Relying on my professional experience I can list the main advantages of the microfront-end approach:

  • use pages and widgets as completely independent applications
  • easily test isolated parts of functionality
  • parallel deployments

Speaking about cons, I can mention the following:

  • application complexity increases
  • huge difference in the JS bundle size in comparison with monolithic application
  • issues with caching and versioning (use lerna!)

On the one hand, using this approach in small projects can be not reasonable. On the other hand, large projects with distributed teams could find more profitable building microfront-end apps. This is the reason why today the microfront-end architecture is widely used by many large companies in their web applications.

Code splitting

Multiple Apps

Here we have several independent applications – with our own webpack, some states, routes, and components that we share between them.

For example, single sign-on: you are authorized in one application and remain authorized between all applications of the platform and technically you are on the same website. But you lose the state and cannot share the state in this case, because these are different domains, different websites, but they have common components and they look the same:

Single Apps

We can setup one mega-website and call it a Single App, in which we can create more mini-applications due to chunks, by splitting code into pieces. It all looks like a graph: we have one level (authorization), work with data is another level, analytics, admin panel… they’re nested:

And how it works under the hood:

We have a kind of common (shared) application. This app knows how to work with permissions and redirects, handles state, cookies, and auth errors by redirecting you to the auth page. By the way, auth can also be a separate application that lives independently, which has its own modules, state, routes, and its own localization.

Just imagine that the website has 1000+ pages and you have 1000+ localizations and your localization file size more than the entire website size. Fortunately, it is well handled by Webpack and chunks so as you haven’t download unnecessary things:

import(/* webpackChunkName: "sign-in" */ './features/SignIn')
import(/* webpackChunkName: "localize" */ './utils/Localize')
...
import(/* webpackChunkName: "chunkName" */ './path')

State managing

Nowadays, there are a bunch of state managers like Redux, MobX, Flux, Rx.js, etc.. The main advantage is that you can use dev tools and watch the state change in a time-lapse:

In the real life, everything can be resolved with the Context or GraphQL or some other library or approach.

The typical Redux data flow looks like this:

Let’s say there is some kind of data flow, we need to make a request to the server. We have some kind of choice of data streams (web-rtc protocol, http, sockets), there is a kind of abstract layer above the API that handles api-requests, adapters that map data into a normalized structure. There can be an action, store, reducer, selectors. Then we pass this data in props to the component.

Well, all this can be easily split:

Here we have an app and we can easily share the state so that each module will have its own. As I said before, we should represent it like a graph to avoid building a kind of plain architecture and website.

For example, in Redux we have a provider that shares the state to the whole app:

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux' import { App } from './App'
import createStore from './createReduxStore' const store = createStore() ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root')
)

Conclusion

Web-development, as well as architectural approaches and tools, is growing every day. Microfront-end architecture, like any other architecture approach, has it’s own pros and cons. You should design app architecture according to your team, project and app needs. Anyway, it’s better to keep this in mind and be preprapared for any circumstances and projects.

In the next part, we will cover the frontend metrics and develop our own migration plan from the old application. So stay tuned and have a nice hacking!

by Ilia Kniazev @iliakniazev. Software developer with a deep expertise in web-development. Current company – June Homes (ex. – Tinkoff Bank)Read my stories

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.

Coinsmart. Beste Bitcoin-Börse in Europa
Source: https://hackernoon.com/react-application-architecture-code-splitting-part-2-pmb35ii?source=rss

CNBC

‘Assassin’s Creed Valhalla’ DLC will let you lay siege to Paris this summer

Published

on

When Assassin’s Creed Valhalla new expansion comes out this summer, it will allow players to relieve the Siege of Paris, Ubisoft announced at its Forward E3 event on Saturday. Historically, the 845 CE event culminated with the Vikings occupying the city and doing what they did best, plundering it for all it was worth. 

How the event will unfold in Valhalla, we’ll see, but Ubisoft promised the DLC will include new weapons, gear and abilities for players to discover. Additionally, The Siege of Paris will see the return of a fan favorite feature: black box infiltration missions. Leaning into the franchise’s sandbox roots, these will give you an objective to complete, but how you go about accomplishing it will be up to you.   

Come this fall, Ubisoft will also release a new Discovery Tour for Assassin’s Creed Valhalla. The company said the educational software will be free for all Valhalla owners. The AC team redesigned the experience to allow you to play as people from the era so that you can get an idea of what life was like in the Early Middle Ages. For the first time, Ubisoft also plans to support an AC game beyond its first year of availability. The company said it’s working on more expansions it plans to release next year.   

All products recommended by Engadget are selected by our editorial team, independent of our parent company. Some of our stories include affiliate links. If you buy something through one of these links, we may earn an affiliate commission.

Coinsmart. Beste Bitcoin-Börse in Europa
Source: https://www.engadget.com/assassins-creed-valhalla-siege-of-paris-dlc-200711445.html?src=rss_b2c

Continue Reading

CNBC

Rocksmith+ is an Ubisoft subscription service for learning guitar and bass

Published

on

Ubisoft is reviving its Rocksmith franchise with Rocksmith+, a subscription service that aims to help you learn guitar and bass. You can connect your instrument to your PC, console or mobile device and practice by playing along with master recordings of a wide variety of songs. 

Rocksmith+ works with acoustic instruments and amps as well, since you can use your phone’s microphone to pick up what you’re playing. So, you won’t need any extra gear to use it. 

You’ll get real-time feedback as you’re playing, and songs will have adaptive difficulty. You’ll be able to control playback speed, so you can slow tracks down and really get to grips with them.

Ubisoft says Rocksmith+ will have a “huge amount of songs at launch” from a variety of genres, not just rock and metal. Pop, hip hop, country, Latin and R&B tunes will be present too, as will tracks from Ubisoft games by the looks of things. 

Every song will have chord charts for rhythm players. There will be note-by-note “authentic arrangements,” if you want to learn those parts as well. You’ll be able to create your own arrangements for licensed songs through the Rocksmith Workshop.

Ubisoft didn’t reveal a release date or pricing. However, you can sign up now for a closed beta on PC.

All products recommended by Engadget are selected by our editorial team, independent of our parent company. Some of our stories include affiliate links. If you buy something through one of these links, we may earn an affiliate commission.

Coinsmart. Beste Bitcoin-Börse in Europa
Source: https://www.engadget.com/rocksmith-plus-ubisoft-forward-194252897.html?src=rss_b2c

Continue Reading

CNBC

‘Rainbow 6: Extraction’ brings alien co-op shooting on September 16th

Published

on

As promised, Ubisoft showed off Rainbow 6: Extraction, a fresh spin on its consistently popular first-person shooter. Extraction takes the R6: Siege formula into a new co-op direction. You and up two other friends will take on missions where you have infiltrate facilities that have been taken by a alien species known as the Archaeans. Similar to Valve’s Left 4 Dead, you’ll encounter different classes of enemies that have unique abilities that will force you and your teammates to adjust your strategy. 

You’ll want to approach most encounters stealthily in part because if you lose one of your teammates, the operator they played will be unavailable until you rescue them. When Extraction comes out on September 16th, it will include support for crossplay. You’ll be able to play the game on PlayStation 4, PS5, Xbox One, Xbox Series S/X, Stadia and PC.

All products recommended by Engadget are selected by our editorial team, independent of our parent company. Some of our stories include affiliate links. If you buy something through one of these links, we may earn an affiliate commission.

Coinsmart. Beste Bitcoin-Börse in Europa
Source: https://www.engadget.com/rainbow-6-extraction-193855589.html?src=rss_b2c

Continue Reading

CNBC

Google will update Chrome OS just as quickly as its web browser

Published

on

Google isn’t just reserving speedy updates for its Chrome browser. Google is moving Chrome OS to the same four-week update schedule, starting with the M96 release in the fourth quarter of 2021. You’ll only have to wait about a month to get bug fixes and security patches for your Chromebook.

The company will skip the M95 release to bring Chrome OS and the Chrome browser in sync. You’ll also see a slower, six-month update schedule for schools and enterprise customers that should arrive by the time M96 is ready.

The move is meant to accelerate feature releases while focusing on the “key pillars” of Chrome OS, including stability, security, simplicity and speed. To some extent, it’s an acknowledgment that Chrome OS updates have become more iterative as the platform matured — the focus is now on small-but-fast tweaks rather than giant changes. Slower updates are now meant for classrooms and others more interested in solid code than the latest interface.

All products recommended by Engadget are selected by our editorial team, independent of our parent company. Some of our stories include affiliate links. If you buy something through one of these links, we may earn an affiliate commission.

Coinsmart. Beste Bitcoin-Börse in Europa
Source: https://www.engadget.com/google-speeds-up-chrome-os-updates-192522464.html?src=rss_b2c

Continue Reading
Esports3 days ago

Genshin Impact Echoing Conch Locations Guide

Esports5 days ago

All 17 character locations in Collections in Fortnite Chapter 2, season 7

Esports4 days ago

Here are all the milestones in Fortnite Chapter 2, season 7

AI5 days ago

How to Become a 21st Century Engineer?

Blockchain5 days ago

BPI No Longer Allows Crypto Transactions

AR/VR5 days ago

‘Warhammer Age of Sigmar: Tempestfall’ Gets First Look at Gameplay, Invite-only Beta

Blockchain4 days ago

Doge meme Shiba Inu dog to be auctioned off as NFT

Esports4 days ago

What Time Does Minecraft 1.17 Release?

Esports4 days ago

How to Fly UFOs in Fortnite

Esports3 days ago

MLB The Show 21 Kitchen Sink 2 Pack: Base Round Revealed

Blockchain4 days ago

World Economic Forum Releases a DeFi Policy Toolkit for Fair and Executable Regulations

Esports5 days ago

How to unlock the Superman Skin in Fortnite Chapter 2, season 7

Blockchain5 days ago

Donald Trump on Bitcoin: “Essentially It’s a Currency Competing Against the Dollar”

zephyrnet3 days ago

7th Global Blockchain Congress by Agora Group & TDeFi on June 21st and 22nd, 2021, Dubai.

Esports5 days ago

How to get Rick from Rick and Morty in Fortnite Chapter 2, season 7

Aviation3 days ago

The Story Of The Boeing 777 Family

Gaming4 days ago

MUCK: How To Get The Best Weapon | Wyvern Dagger Guide

Blockchain3 days ago

Woonkly will be the official Title Sponsor of the 7th edition Global Blockchain Congress organized by Agora Group in Dubai

Crowdfunding5 days ago

US Government Claws Back Crypto from Ransomware Scam as Feds Flex Growing Tech Muscle

Blockchain3 days ago

Death Cross is Appearing Over Bitcoin Price Chart

Trending