React JS v React Native - user-interface

I am looking to decide what to you to style my meteor application with which I plan to launch solely as an android and iOS app. It will not be made into a website.
My understanding is react native is the same as reactjs but geared towards mobile apps. Is this this true? If so do you recommend using react native instead of reactjs for making apps or does reactjs still offer greater benefits?
Also, is material ui or anything like that needed when using react native?

React-native shares a mental model with React and some key code, but is significantly different. Here's a few points/differences to consider:
Runs w/ bridged-code that executes native functionality not normally callable by or with JavaScript.
React and react-dom are meant to run in a DOM environment (react-dom can run server-side, but the apps are meant to run and be interacted w/ primarily in a browser context).
It allows you share code between platforms, but you usually can't and shouldn't expect to have 100% code re-use.
You can drop to native when appropriate, but in a good situation you can share code more often than not.
Lastly, for material UI, if you're talking about the google material UI, is a stylistic UI lib, not a cross-platform interface library. It's more akin to bootstrap than React. There are plenty of libraries that implement google's material UI, and those might be created specifically for React, React-native or another library/platform.
Hope that helps a bit!

Related

How to implement UI in mobile application

I have a hybrid mobile app.
The framework is vanilla Javascript (i.e. no React, Angular, Vue, etc..).
The GUI work as expected (i.e. the buttons trigger the correct functionality) but the UI is lucking.
I have a UX / UI design in place, in form of an idea and example sketches, but not in any framework (e.g. no Figma files).
I use Bootstrap inconsistently in the app, for some of the buttons and found about Material Design Bootstrap.
I see many blogs about UI design and design tools, such as Figma, Sketch, Adobe XD, etc.
In my case, I already have the UX/UI design results. (although just conceptually - not in any files).
So I'm looking for UI implementation (not design) tools / packages / approaches.
What is the best way to implement the UI?
Could I just start implementing bits and pieces of the UI?
Or should I use a specific framework/platform/mockup ?
Thanks
i would advice you implement the ui in bits as you would have better understanding about the code running your ui and how to easily connect the gui to functionality. tools like figma have features that can convert designs to html/css code buut that would require having to work on design files.

Is it possible to build mobile and web apps from the same code base?

Is it possible to have a single code base for a mobile(ios/android) and web application? I'm thinking about using react native or angular/nativescript. If you have attempted this what are the things to keep in mind before doing this. Also anything particular to for SEO?
Most importantly are there any real world apps with reasonable complexity that already have done this?
NativeScript actually supports this a couple different ways.
NativeScript officially supports Angular; so you can create everything as an Angular application. Almost the entire app can be shared between Web and NativeScript; the only things that can't is the actual screen layout. In Angular for the Web; you use HTML tags so it might be somepage.html <div>{{somevalue}}</div> and for the NativeScript side you would have somepage.xml and it would have <Label text="{{somevalue}}"></Label>. This allows you to layout the app using the native components for Mobile, and web components for browsers, but use the same backend logic.
There are several seeds and platforms that are designed around fully creating a web app and a NativeScript mobile app that can share virtually everything.
NativeScript also supports VueJS; in this case you can again create virtually everything that shares much of its code base, the only thing is again you need separate layout files because again the web uses html, and NativeScript uses native components. So you have to have separate display files.
Disclaimer: I also work for nStudio; I tend to do non-angular type plugins mainly; but I do know that xPlat is really state of the art and has been used in several successful applications that our development studio has produced.

Angular 4 pre-rendering with a components library using .net core 2.0

I understand that any components library that depends on window or document cannot be used while we pre-render an angular app.
Does this mean it is practically not possible to pre-render an app without writing our own components library and making it somehow not dependent on window? if there was an amicable way of doing it, people would have already done it, right ?
this begs the question what strategies people have followed while successfully pre-rendering an angular app and also using an external components library ? if there is no way of doing that, are people using pre-rendering without any such library in prod ?
I have gone through all the possible solutions to make angular material work with aspnetcore 2.0 pre-rendering and none of them has worked, eg: angular-ssr
Any kind of strategy advice is hugely appreciated, this makes me also wonder if pre-rendering is such a pain in angular and very important for the business side of an app, using react is a better strategy ?

Using nativescript-ng2-magic

I have a question. I wanted to start implementing a web (desktop) app and, with almost the same code base) with nativescript the native app for iOs/Android.
My question is, I have already implemented the native app, can I use the nativesript-modules (like color, ui/page, etc.) also for the web app?
Thank you in advance
You can't use those.
I think nativescript-ng2-magic and advanced-angular-seed (same author) are made to be used the other way around.
You have to refactor your services to be platform agnostic (as they should be) and the custom Component decorator takes care of switching templates. If you have lot of accessing nativescript-modules in your component's code, the switch is not going to be easy.

What is a Twitter Bootstrap UI?

I recently came across this term and I was wondering if there is anyone that could enlighten this concept and how it could fit into application development?
Twitter Bootstrap
You're probably reffering to Twitter Bootstrap. Not to be confused with normal bootstrap, which is something else.
Twitter bootstrap is a small (frontend) css/js "framework" with which you can build fluid web pages. So this is meant for web design only.
This means that when you resize your browser, all elements will be resized aswell, so that it even displays everything nicely on a mobile device.
For examples and more information check out their github page: http://twitter.github.com/bootstrap/
What is bootstrapping? (bootstrap)
Bootstrap (or bootstrapping) is something different. A bootstrap is a piece of code that is run when the machine (or application) first starts. A bootstrap file contains all sorts of standard configurations to configure itself.
There's actually more detail behind the whole bootstrap story, so for more information please read the wikipedia article:
http://en.wikipedia.org/wiki/Bootstrap
Bootstrap(aka Twitter Bootstrap)
It is a powerful front-end(CSS,JS) framework for faster and
easier web development.
It contains HTML and CSS-based design templates for
typography, forms, buttons, navigation and other interface
components, as well as optional JavaScript extensions.
It is compatible with all browsers from mobile to desktop
platform.
Since version 2.0 it also supports responsive design. This
means the layout of web pages adjusts dynamically, taking into
account the characteristics of the device used (PC, tablet, mobile
phone).
Its open source and its hosted on GitHub
To know more
Actually, the people giving the prior answers themselves did not have knowledge of the term and mistakenly, provided to you something "that is more popular".
Bootstrap UI is also called Angular UI. This is a JavaScript Library that is used for enhancing features used in projects using both - Bootstrap + Angular. It synchronized between them regarding pagination and other stuff. It is useful for projects primarily using Angular.
See here more details:
https://angular-ui.github.io/bootstrap/
https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
Thanks, buddy!

Resources