I am building a application using react native and am wanting to keep the components as native as possible.
Ant Design looks really good but i am worried that the components are not native and just web components? They state "Right now we include 47 web components and 40 native components."
Basically my question is has any one worked with this library ? What was the performance like with these designs?
Thanks in advance
You have to understand that right now there are 3 versions of ant-design
antd: Which is for web projects.
antd-mobile: Which is for web mobile projects.
antd-mobile-rn: Which is for native mobile projects.
And you should also check out Marc Lore answer of How does react native work question http://qr.ae/TUIrTu.
With that in mind right now as far as I now there are a lot of Framework UIs for react native, but none of them are truly NATIVE, those are just components that would run on the Javascript Thread, but don't underestimate them, because they are very fast, and customizable; The only native solutions for react-native are some Calendars, Popups, and Navigators.
Ant design it's very awesome, and there are a lot of people backing the project up so it's an active project, I've been working on some private projects for the company I work for, using ant-design, and we haven't had any performance issues, take into account that performance it's also measured for a lot of factors, like if you are using too much observables (redux and rxjs/sagas), overenginnering the layouts, available RAM on the device etc.
A little late for an answer but I hope you give it a chance :D.
Note: I'll keep updating this answer when I find some TRULY NATIVE components for react-native.
Related
I'm a new developer with about six months of experience in the backend side, some months ago I started a company with a business partner, we are developing a business intelligence solution, since then we was working at the back-end part, I have started at the front-end world about 1 month ago, I did a React course where I learned router, redux saga, hooks and other things as styled-components. Our intention is to recreate the front-end part of the system which current is a MVP did by one freelancer.
As I do not have any experience at the frontend, we are planning to use some React theme, this way we decrease the chance of doing wrong decisions during the development of the pages, as in the architecture side.
I'm searching for a dashboard theme based in React which I can edit to our needs, after talk with some friends with more experience, we decided build the pages using pure CSS together with styled-components because I'm a little familiar with it (at the React course I did some exercises with React and styled-components), also because it is easy to use, easy to future developers maintain, also for faster development, as will not need to create a design pattern from scratch and also some front-end developers told me they develop faster in pure CSS in comparison to use some UI framework. Also a reason to do not use UI frameworks is because our costumers use the solution more from mobile than desktop, then soon we will need to create the an app with React Native and styled-components are compatible with it, and Material UI and Bootstrap frameworks that are the most famous framework are not by compatible with React Native by default according the research I did.
The problem is I'm not finding a dashboard theme without UI framework, all the dashboard themes that I have found are UI frameworks as Material UI and Bootstrap, so I'm asking my self why I can't find dashboard themes using only styled-components, without UI frameworks, maybe because is not common and also is not a good practice create a system not using some UI framework? or it is normal and also is a good practice?
If yes, some suggestion where I can find it? Preferable open source. Other thing which I'm asking my self, why does not have or why is not popular open source themes at GitHub?
Design is ALOT of work
In my opinion it's probably a mistake to not use a design framework especially when you don't have extended knowledge and resources in design & UX. A design framework makes it alot easier to create a consistent, responsive and polished look especially if you are not a design professional / don't have someone exclusively working on design & UX. Design is alot of work especially when designing for mobile, users expect a certain amount of fluidity and animation that is time intensive and hard to get right when you are unexperienced. Talking about user expectations; this is is another reason why using a framework can be handy. If you use a framework that is well known you'll allready know how other apps using this framework are structured and it will be easier to find a structure for you own app. On the other hand users can transfer their knowledge about workflows from other apps that use a similiar style. Your app will be easier to use.
Development Time & Speed
Also I don't understand how not using a framework would save you time rather than cost you time. The only time thats ever going to be true is if you have design ideas so specific that you don't end up using any of the styles provided by the framework or you spend so much time customizing the styles of the framework that you could have done it from scratch aswell. In either of these cases you need a developer that is heavily / purely dedicated to design & UX and it doesn't sound like you would wanna do that.
Theme vs. Framework
Lastly you should ask yourself where you draw the line between framework and "theme", and why you are so eager to distinguish them. What would be the point of finding a "theme" and then manually applying the style to all your components rather than using a framework that allready provides you with components that are styled appropiately?
P.S.: afaik Material-Ui is definetly a thing for React Native and has a pretty big following too.
I am new to react native I want to know can we able to share the same code base for web-based and for the mobile application using react native.
If yes then how to do that?
I think you're referring to using React to build a web application and then wondering if you can port it to React-Native? You can share the same idea's, method, and architecture. But no, the code doesn't translate 100%, really not even 50%. React vs React-Native use different things, for example React uses < Div >'s while React-Native uses < View >'s, img to < Image >, etc. So while figuring out many of the design questions and implementation for the web version will surely make your RN development faster. You still need to plan on the RN port being the same Development process (plus longer for bug testing on the many different devices) and allow a developer adequate time.
The answer is yes. You can share the same code using react-native-web.
But keep in mind that the idea behind React and React Native projects is that you could learn one time and use everywhere so their goal is to make possible to use a very similar architecture, data flow, etc. but not sharing the same code. Also, a lot of packages and third-party components will not work as expected. So, react-native-web is a very interesting project and you should definitely give it a chance, but most of the times it will not do the job 100%.
I am working on a pet project ( web application ) and I was wondering if I should use react because it would be easy to create native apps from this code (in future if I need to).
And if the answer is yes, what are the best practices to follow for
most resuse?
If the answer is no, can you recommend an alternative?
Some more information about my situation.
I am relatively new to react and my alternative will be good ol' html with bootstrap and jquery. I am considering using asp.net mvc and web api.
Sharing app logic between a React Web app and a React Native app, while keeping the individual component rendering unique to each platform is possible!
In my opinion, it is a great option we have available. I will give you an overview of the approach and a few advices.
In an ideal world, we would be able to share 100% of the code. As far as I know, that isn't possible, but still we can share a lot of the code. Although React Native is like React, it is very important to note that the rendering code is different. Instead web things like <div> or <span>, you use React Native components like <View>, <Text> and other built-in components.
However, the business logic in most cases is just JavaScript though and that's one of the important things which we can share!
The plan
Based on the Flux architecture you are using, it would mean that your store(s), reducers, actions would be shared code, as well as most of the business logic (inside services or whatever) and the constants and utilities too.
The UI layer would then be written specifically for each native platform using React Native and for web using React. Not only because it’s necessary to replace the HTML elements with React Native components, but also because the components will probably have a very different behavior on the mobile app.
Some General Guidelines / Advices
Consider a good architecture and code structure in order to share as much code (and application logic) as possible. Try to separate the UI presentation components (which will be different for each platform).
Take a look at the JavaScript Environment specifics in the React Native docs. When using React Native, you're going to be running your JavaScript code in two environments:
On iOS simulators and devices, Android emulators and devices. React Native uses JavaScriptCore which is the JavaScript engine that powers Safari. On iOS JSC doesn't use JIT due to the absence of writable executable memory in iOS apps.
When using Chrome debugging, it runs all the JavaScript code within Chrome itself and communicates with native code via WebSocket. So you are using V8.
While both environments are very similar, you may end up hitting some inconsistencies.
Consider the different strategies for sharing the code. In order to accesses shared code, the apps you're building doesn't have to all live in the same codebase or git repository.
More realistically, you would have two or more projects hosted separately, so an npm package is one of the easiest ways to share code between them.
This is easy as making a new package and setting it as a dependency inside each of your projects. For the path to the shared project, you can use a git repository rather than pointing to a public package on npm.
Even though you're building only the web app now, you could spend some time thinking about how you could generalize some of the shared code, so it is easier to re-use it in future.
It's possible and viable. You must have a view for each platform (web/android/ios), because each one have your components..
The business logic must be out of the view. Use flux can easy your project with native, because the it move the api interaction to a data layer, letting the view be just a view.
I'm new to react and while browsing through the net I came across various terms associated with React - Flux, Redux, Relay, Graph QL.
So far I understand these are design patterns for a React app.
I want to embark on a small side project using react and am confused as to which architecture to invest time and effort in learning and implementing .
Could someone please help me out here ? Thanks!
A brief overview of each with the pros and cons would be ideal .
Yeah, it can be daunting. The thing is React is just a UI component framework (but an awesome one) so the rest of the application architecture is up to you. Flux and Redux are solutions to managing state (not just in React), both are certainly worth learning about. Relay and GraphQL from Facebook are solutions to fetching data from a server and requires both client-side and server-side implementations to be used.
I agree with Tom's comment: for a small project start with just React (and complimentary libraries for details like AJAX and routing). There are still basic React patterns to get the hang off. Once you are comfortable with React and your app gets large enough, you will likely start to feel the strain of managing state in your UI, and that will be a good time to seek out something like Flux or Redux.
All:
I am thinking of starting React Native, one reason is many people talk its performance is better than other Hybrid Framework, but I am wondering how React Native make it faster in Mobile, I thought all hybrid app is like a web app run in a webview, is the way React Native uses different from Cordova? Could anyone talk about the procedure how React Native is turned into a mobile app?
Thanks
I agree with the other comments. Your question is a bit broad, but the short of it I think is that hybrid apps rely on the WebView, so they're performance is limited by the browser's performance, which is of course single threaded. Getting 60fps animations is a constant struggle for Hybrid apps, though they're getting better all the time both in terms of the browser's capabilities and technique.
React Native bridges to native components, so you get native performance characteristics. Things like calculating the view are offloaded acync to separate threads, so the user's experience is never blocked.
Here's a useful list of other benefits...
WHY REACT NATIVE IS THE BEST SOLUTION WE HAVE SO FAR FOR NATIVE MOBILE DEVELOPMENT
sorry for the all caps... that's the actual title of the list :/