23

Reading about Ant Design I am getting confused about which library to use for mobile web development. There are two libraries, antd and antd-mobile. While it is clear that antd-mobile supports react-native on iOS and Android, it is unclear which one is best suited for plain mobile (non-native / SPA) web development.

Reading the antd introduction you see statements like "Ant Design which is specially created for internal desktop applications, ...", while reading the antd-mobile introduction you will see "Support Web / iOS / Android platform (Based on React Native)"

From this I would think that ant is somehow not very suitable for web development other than web based desktop (i.e. Elektron) apps.

But trying to build a normal web app with ant-mobile I couldn't get it to work. For example the Button is showing but DatePicker is not. Switching to ant everything seems to work fine.

Am I right to assume that for any non-native mobile development you need to use ant instead of ant-mobile?

If so, what is this supported "Web" platform that antd-mobile is mentioning?

Thijs Koerselman
  • 21,680
  • 22
  • 74
  • 108
  • 1
    what did you eventually go for. I am in the same dilemma as you and would like to know if you were able to zero in on something. Also, any other UI frameworks you can recommend that work well for both. – Arpit Oct 01 '18 at 10:48
  • I went with `antd` as mobile wasn't so much of priority for the (admin) interface I was building. I honestly don't know how it performs on mobile, but my guess is that is definitely suitable. My second choice would probably have been semantic-ui, but I think other libraries have popped up since. React + good Typescript definitions were important to me. – Thijs Koerselman Oct 23 '18 at 10:05

2 Answers2

14

From my experience:

Antd:

Intended for full browser web only (or electron) development, they are no mobile first design, some cases you have to tweak to make you web page look good in mobile.

Antd-mobile:

Antd mobile exports 2 versions of components, the web one (which uses DOM) and the react native version (uses View, Text etc...)

Web version: You can think it's like jQuery Mobile, Sencha Touch etc, it's intended to build pure mobile web page/application, the application that you are going to see in a mobile browser. example, go and open facebook.com, amazon.com with a mobile browser (they look really different then the desktop one).

React Native version: You will use this to build a Mobile App (a hybrid app) that sits in Google Play store/App Store, an app that needs to be installed.

Hope it helps. If I made mistakes please let me know.

Yichz
  • 9,250
  • 10
  • 54
  • 92
  • 1
    OK, but that would not be optimal for a lot of users. Creating a non-native mobile-only version of a web application is for most cases not feasible. I need to create a responsive app that works equally well on large an small screens, like most web development is done. So I'm still not sure if I should then go for `antd` and work my way through mobile issues, or choose the mobile-first `antd-mobile` and hope it is compatible with normal keyboard / mouse etc interactions like hover states. I would guess `antd-mobile` would then be the logical choice. . – Thijs Koerselman Oct 27 '17 at 12:22
  • I must say I'm a bit under-impressed that these differences are not clearly laid out on the website. I can't start a new project using this if I don't know in advance what I'm getting myself into. I like that antd is developed in TypeScript, but a good alternative would be `semantic-ui-react` which also has typescript definitions included. – Thijs Koerselman Oct 27 '17 at 12:52
  • 1
    I would say actually for large web app you will always have to separate the desktop web and mobile web, since responsive makes large apps (I m talking about web application, not web pages) add much more trouble to solve. antd uses flexbox.css underline for responsive you can always tweak yourself, I've used semantic-ui-react also, their grid system is too overcomplicated. – Yichz Oct 27 '17 at 15:12
  • Of course large is subjective here. I mainly develop apps not websites. I've never worked on what I would call huge and highly complex UI apps, and I can imagine it can get really challenging. But for the vast majority of apps I would say splitting non-native web code into two separate codebases plus the more complex hosting setup that comes with it seems old-fashioned and not feasible for anything but enterprise scale solutions. Then I'd always go for web + native app. – Thijs Koerselman Oct 28 '17 at 14:02
  • 6
    But all responsiveness / design aside, I need to develop a web app that works for desktop and smaller touch screens like tablets. What library do I choose? antd or antd-mobile? – Thijs Koerselman Oct 28 '17 at 14:08
  • I cannot say other libraries. but between antd vs antd-mobile, for a responsive app. antd is definitely what you want. most component are responsive friendly you can tweak a little bit more with their grid system and avoid using components that are not born to be, and never will be mobile friendly such as Table, cascader, tree select, nested too many menus etc. – Yichz Oct 28 '17 at 17:24
  • btw, take a look at http://preview.pro.ant.design/, so you know what can be responsive what are not. – Yichz Oct 30 '17 at 20:37
  • Thanks, that's really neat! But all the documentation seems to be in Chinese How does this compare to the normal antd library? I guess this is it a collection of more high-level widgets and components built on antd? – Thijs Koerselman Nov 01 '17 at 09:36
  • It's base on antd@3.0 (with react 16) and the "pro" version is still alpha until antd@3 is ready. and you are right, it aims to be a start kit base on antd with most stuff working out of box – Yichz Nov 01 '17 at 14:34
  • 1
    Hi, i would like to know if i should separate the web into antd and antd-mobile? or just antd and apply media queries? – kaizen Dec 04 '19 at 02:53
  • 2
    @KevinLee I would say really depends on how large is your project and team. there are things that would be hard to "media-query" eg. date picker, antd-mobile handles gestures and swipe while antd not. if you are doing responsive then just use antd, if you want adaptative, then you would want to separate. – Yichz Dec 09 '19 at 19:49
1

In 2023 ant design for react native is here https://rn.mobile.ant.design/

yarn add @ant-design/react-native

This appears to be the best option for none native apps. ant design mobile is specifically for responsive websites.

The project is not updated often so I would strongly advise using another library, unless you use ant design already.

I tried it and ended up using a different library due to this error when installing in an expo project, because it appears to be badly supported and there are some much better options out there.

ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNCCameraRoll' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes ERROR Invariant Violation: "main" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes
Benjamin Roberts
  • 476
  • 4
  • 12