How to download and run code using eval on React Native? - javascript

Context:
We are already using a framework to develop our mobile app which is pretty similar to React Native (We write everything in JS and it runs on Android and iOS).
Our framework provides some built-in APIs to display things on the screen and do other stuff.
Example:
function homePage() {
List.addTitle("Welcome");
List.addButton("Next", "goToNextPage()") // List.addButton(label, onclick)
List.show() // will display currently what is in the buffer or List
}
On Android, when a user logs in, they will download the latest code and run it (via eval). On iOS, we need to make a new build and submit to Apple everytime we need to release a new version
Goal
The goal is to migrate to React Native and only reimplement the basic APIs of the old platform (like List) so that we can keep using the code that we already wrote.
I've seen solutions like CodePush / AppCenter but our code is not in ReactNative yet so I don't think it will work for us.
This question and this one are related but do not have concrete answers.
I've written a small Snack to give you an idea of how I hope it would work.
The Login component handles the login
The SignIn component evals the code and renders whatever is in that code
Question
I had to reimplement the List API in the same file as SignIn.js.
If I try to import it, then List will be undefined in the eval.
Why?
With this method, the downloaded code will have to be eval'd everytime we refresh the page or navigate to another screen. I'm worried about the performances, is there a better way to do this?
Thanks a lot for your help

Related

How to handle live updates to your mobile app using capacitor?

I have a react-js app and I use capacitor to leverage with native mobile API's (eg: BLE). My objective is to live update the app upon a minor change (eg: adding a new label) without going through the whole appstore submission process. I know Ionic has AppFlow that could work well with Capacitor, but it is way too expensive for me. Thus, I saw some are suggesting writing a script that pulls in the JS perfectly from somewhere like the S3 bucket, and when you build the app you build in all of the native code and replace the HTML scripts with one that comes from a remote source (But I have no idea how to do it)
Is this how most people handle live-updating webview apps or is there a better way ?
If so what are the steps to achieve this objective using scripts and so on (with code examples)?
Hey I'm the Maker of Capacitor-updater, the only alternative to ionic AppFlow.
The updater allows you to manage update by yourself, store your zip update where you want and use the download method.
How to start
npm install #capgo/capacitor-updater
npx cap sync
Then in your main JS, this is required to let the updater know the update is valid
import { CapacitorUpdater } from '#capgo/capacitor-updater'
CapacitorUpdater.notifyAppReady()
And lately after checking yourself the current version need update:
const version = await CapacitorUpdater.download({
url: 'https://github.com/Cap-go/demo-app/releases/download/0.0.4/dist.zip',
})
await CapacitorUpdater.set(version); // sets the new version, and reloads the app
After many request of people didn't want to do that themselves, I started Capgo a business to manage all the update process for you.
All is open source and can be replicate on your own as well.
Doing things for Capacitor is now my main activity, I produce open-source plugin as my main channel of Marketing, I'm solo founder and bootstrapped.
Hope my tool will help you !
You need a subscription to Ionic's AppFlow, as of yet ionic is the only company that offers live updates.

How to migrate html, css and javascript application into react-native components?

I've created a web application using HTML, CSS and Javascript but is it possible to convert it to a react-native app with the help of any kind of wrapper for HTML, CSS and JS code which can be used within react-native. I would like to convert the web application component into react-native components though it would be a tedious process if I need to change anything in the web application which in turn lead me to change the react-native components.
You cannot use html,css,and javascript code for react native app. Beacause react native has its own tags so it wouldn't possible but still if you can follow the attached url hope it may give you ideas
https://medium.com/javascript-in-plain-english/how-to-convert-any-web-page-to-reactjs-9740f1ba15db
a method would be...
react-native-WebView? I haven't tried it out but from what it sounds like I think its like android web view where u can give it a link and it will load that webpage? that's the closest thing I can think of. of course this method has limitations obviously...
I don't think there are any good methods to turn react code to react-native code since both have different tags and even if you do somehow do it you will have to climb mountains of bugs and fixes if your app is kind of complex.
but if in the future u do take up a project that is for both web and native, and they both share a load of functionality I would recommend something like react-native-web where you can share a codebase between web and native. essentially by making a native app ur making a web app aswell. its a bit tricky when u start but if your having projects like this it will be helpful. hope this gives u some ideas

Is it possible to create a react app that runs when Javascript is disabled in browser?

I am developing a reactjs site and I want to make that site running even when the javascript is disabled in browsers. Is it possible? how to develop a react site that runs on both conditions (Enabled and disabled of Javascript) for ex: fb, StackOverflow are running even javascript is disabled how it happens?
React is a JavaScript framework for the front-end. Which means it executes in the browser. If you disable JavaScript in the browser, React doesn't work anymore. Just in the same way if you delete Photoshop from your computer, you can't open .psd files anymore.
If you really must support browsers without JavaScript (which most people don't), you need to build your app to work with plain old HTML based navigation (think links, forms etc).
It's possible to use React (for people with JS enabled) and a fallback for those without, this approach is called Progressive Enhancement. Might be useful to you: https://softwareengineering.stackexchange.com/questions/25969/should-i-bother-to-develop-for-javascript-disabled
First thing, React is a javascript library so it depends on Javascript. But you can use server side rendering like Next.js and render the content on server side.
But still user cannot use any react feature in browser.
It's good to render the initial content on screen.
Stackoverflow renders the initial content on server and sends the initial rendered content to the browser.
It's also good for SEO.

KISSmetrics - React Native iOS

I am using React native to create an iOS app; So my code is in javascript and some objective-c.
Now i wan't to implement KISSmetrics in my project, i have done the proper setup based on kissmetrics documentation, but when it comes to create events and user identifications etc… i have to use data from my javascript code.
Does anyone knows how to do that? for example:
the objective-c code to identify the user is this: [[KISSmetricsAPI sharedAPI] identify:#"name#email.com"]; but how can i get the code that gets the identity of the user and replace the name#email.com from my javascript code?
I would look here to find out how to build a native module bridge. The way it works is that you create an iOS native module with methods that you can actually call from JavaScript by which you can send your data from JS to Obj-C.
Here's an example project that does this:
https://github.com/idehub/react-native-google-analytics-bridge
You don't need to turn it into a full-fledged NPM library, you can just simply create the necessary native files and JS files on the fly in your project.
Also, if you don't know already, remember to rebuild the iOS project (hit the Play button) to see your changes because the native side doesn't have Live Reloading.

tvOS load website URL

I am new in tvOS application. i am trying to integrate custom application with TVML & TVJS. I created a page and add banner in it. My requirement is to load a webpage inside that application. I tried different methods to load a webpage using that application.js file but fails. Please help me how to load a webpage using TVML and TVJS.
If I understood you correctly, you need to use UIWebView class but you cannot find it in the tvOS SDK (because it was removed). But you can use this class as a "private API class" (you can create an instance of this class and call methods for it, because you have enough information about UIWebView). It can be hard for you. If so, you can use some libraries (such as https://github.com/jvanakker/tvOSBrowser) that using the private API to make UIWebView available in the tvOS.
I think you might have a hard time on getting a web browser on the TV app store, as I think apple does really see people browsing on the apple tv.
Depends on your use case,
if you are only trying to display a page, you might able to use some of the online url to picture services like https://urlbox.io/docs, or build your own server using existing browser features. https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/getScreenshot
If you are getting users to another services, the correct way to do is with deep link, which you can learn more about here. https://developer.apple.com/videos/play/wwdc2017/246/
or if you are trying to transfer the view into sales, displaying a QR code is the way to go. as iOS 11 makes QR Code scanning a standard, it will be very easy for your users to scan the code. https://www.cnet.com/how-to/how-to-use-ios-11s-hidden-qr-code-reader/

Categories