For example, many iOS applications have a Tab Bar that is distinctly a mobile design.Two Design Framework’s Take on the TopicUnsurprisingly, Google’s design framework, Material Design, adheres to the responsive web design approach.Material Design maintains the same UI across platforms, using shared components across Android, iOS, Flutter, and the web.— Material Design — IntroductionInterestingly, Material Design, does intermittently introduce exceptions to this approach, e.g., they specify a mobile-only App Bar.The relatively newer Ant Design framework, provides two entirely different solutions between desktop and mobile.Ant Design: Ant Design’s flagship offering that has a distinctly desktop feelAnt Design Mobile: Ant Design has a lesser known, and little rougher around the edges, mobile-only solutionChallenges with Two Design SolutionsSay we are using two completely different design solutions for desktop and mobile, e.g., we are using Ant Design’s libraries; there are two approaches that we can take.We can create two different applications; one for mobile and one for desktop..The challenges here are how to:Direct the user to the right applicationAvoid code duplication, e.g., the data and business logic, between themWe could also create a single application and programmatically switch out components between desktop and mobile..The challenge here is to avoid having a poorly performing, bloated, application; i.e., carrying around code for both desktop and mobile.The Best of Both WorldsOne of the lesser understood features of modern web application development is code splitting.Bundling is great, but as your app grows, your bundle will grow too..Especially if you are including large third-party libraries..You need to keep an eye on the code you are including in your bundle so that you don’t accidentally make it so large that your app takes a long time to load.To avoid winding up with a large bundle, it’s good to get ahead of the problem and start “splitting” your bundle..Code-Splitting is a feature supported by bundlers like Webpack and Browserify (via factor-bundle) which can create multiple bundles that can be dynamically loaded at runtime.— React — Code-SplittingWith code splitting, we can easily load different components based on the environment (desktop or mobile) and share common code without the performance penalty of having unnecessarily large bundle sizes.A Working Example of Code Splitting with Two Design LibrariesTo demonstrate this approach, specifically with Ant Design and Ant Design Mobile, I created a simple example..This example uses the Ant Design Button component when run on a desktop:And the Ant Design Mobile Button on mobileInspecting the bundles we have the following:Common Between Desktop and Mobileruntime~main.96bfae96.js (3.12 KB): Applicationmain.fb445a75.chunk.js (1.5 KB): Application5.3ddca9df.chunk.js (114.75 KB): Vendor Libraries, e.g., React0.f0876085.chunk.js (18.53 KB): Babel CoreAdditional Bundles for Desktop2.fb734486.chunk.js (273 B): Application4.9dd7575f.chunk.js (516.21 KB): Vendor Libraries, e.g., Ant DesignAdditional Bundles for Mobilestatic/js/3.5a0b0e9a.chunk.js (275 B): Applicationstatic/js/6.6b8e79a9.chunk.js (15.65 KB): Vendor Libraries, e.g., Ant Design MobileObservations:There is an issue with the current release of Ant Design that has all the SVG icons being included in the bundle; even if you are not using any / all of them..Thus the extra large desktop vendor bundle..For simplicity, I did not implement the suggested work-aroundsIn this implementation, the application only loads one of the additional desktop or mobile bundlesThis examples uses the react-loadable library for code splittingInstead of using react-app-rewired, as suggested in the Ant Design documentation, this example uses a custom Create React App implementation that supports Ant Design and Ant Design mobile..Customization is based on an approach documented in the article Customizing Create React App — Done Right.ConclusionWhile I am not 100% sold on merit of the Ant Design Mobile library, again it is a little rough around the edges, I am convinced that by using code splitting, we can effectively supplement our responsive web design approach and create applications that are fully optimized for both desktop and mobile.. More details