Developer’s notes about X JSON Viewer. The developer wants to make a versatile and handy JSON Viewer & Formatter app for macOS. How can we get it rendered smoothly and be handy for loading or saving data? How can we choose the WebKit or native rendering technology for displaying contents? Here are ideas and programming thinking from the app developer.
Features
- Load JSON data in versatile ways: user inputs, dragging a file or request a API
- Pretty syntax highlight
- Tree view
- Level view
- Clearly show child count
- Save and reload data from & to history list
- Export JSON data to a local file
Background
JSON is a widely applied data format for interchanging data. Developers get used to it here and there in their daily development work. Viewing JSON data in a intuitional and easy way is a key point for debugging. I find some online JSON tools are quite usefull.
These tools are online services, which means their can not be accessed when you are offline. As they are implemented in browsers, the UI will not scroll smoothly when viewing large JSON data(10M bytes e.g.). For me, the key pain is that I can save the data to keep a history for later usage.
A screenshot of X JSON Viewer from appstore:
The desirable features
The required features may support to:
- JSON syntax highlighting
- expand or collapse any single node
- toggle nodes in quick level-base way
- process large JSON files smoothly
- load JSON data in as many as possible ways: from the pastebord, from local disk files or by requesting API
- Users can save or export hisotory data items
Roadmaps for various technical implementations
How can we implement this JSON Viewer?
Before I jump into coding, I design the technology roadmaps for feasible implementations from the easiest(but less perfect) to the hardest(more desirable) efforts. I give this a name X JSON Viewer. Here are indispensible UI components by my initial design:
Should implement the tool as a native app, more precisely as a MacOS catelyst app(since I am fimilar with developing iOS apps)
for storing history data locally, for loading data from or exporting data into local disk files
Use a textView for user inputs or editing the text.
Viewing
The most important part of this tool is to help view JSON data more efficently. Here is the evolvtion about polishing view experience.
1. Use a webview to render the formatted JSON strings with hightlight.js and JavaScriptWebBridge
This is the quickest way to get the JSON rendered in a formated and colorfull way. It can be finished with little efforts by reusing the open-sourced hightlight.js. JavaScriptWebBridge is required for messaging between the native and the web environments.
It is indeed easy to implement. That is the initital version for my app X JSON viewer in the AppStore
2. Use a custom WKURLSchemeHandler to message large JSON data
As UIWebView has been rejected when submitting new apps to AppStore, we have to use WKWebView. In WKWebView, it is finally possible to intercept custom scheme requests which is perfect for sending large data. What may disappointe you a little is that the custom scheme handler feature requires SDK at lease iOS 11.
3. Use native TableView and AttributedString to render JSON output
Although now we can send large data to the webview, but large text rendered in webview does not scroll smoothly. This the weakless of plain web contents. To my understanding, large text rendering may be easied up a little by appying React.js to simulate native UITableView’s view reuse. So why should’t we just use native UI to render these strings? Finally I come to this solution for better performance.
4. Use SQLite for storing history data
I use the YapDatabase framework to store data as history items quickly in a key-value store.
You are welcome to try this little paid app from AppStore X JSON Viewer. Send me an email cutclip@outlook.com for a promotion code for this app if you are interested about it.
Tips: With a promotion code for a paid app from AppStore, you can enter the code and then install the app without charing fees.