How to quickly integrate and renew the content of the artist format in your mobile application, almost without loading the project and all with the help of several lines of code? In this material, I will describe our way to solve such a problem.
The material can be interesting to any mobile grocery teams where there is a need for Backend -Driven layout, and the application content of the application – articles, agreements, documents, typical cards, lists, etc.
About the tool
The instrument in question is the Framwork Editor.js Kit created by our team. It turns JSON data format editor.js into a native mobile layout 👇
The framework is posted in Open-Source and is available on GitHub for iOS (SWIFT) and Android (Kotlin). Within the framework of this article, only iOS part is revealed from the practical side.
Background
A couple of years ago, our team was faced with the task of drawing in a mobile application of news articles, user agreements, screens with a description of the goods and other formatted arrays of text alternating with pictures formatted links and lists. In general, screens of the artist format, as on TJ / VC. Content should have been distributed to a bacent, and a specific client (Web / iOS / Android) formates and renders it in accordance with the ideas about the good UX platform and the feeling of beauty.
The task, on the one hand, is trivial. But, firstly, screens with such content are found everywhere in almost all applications, and it would be good to come up with a re-disposed universal solution. And secondly, the option to take UitextView / WkwebView and feed it HTML does not suit us, since the data should be lightweight and the layout should be native.
The decision was made: Pilim Freimvork.
Data format: Editor.js
When choosing a format for the creation, storage and transfer of content, three factors were taken into account:
The editors team should create articles with formatting in some web-editor user;
The API Bacand must be able to accept the written article while maintaining formatting, store it and distribute it to all customers for any platforms in a single format;
A mobile client should accept the content of articles, parse it and renders Naval.
We thought not for a long time: we stumbled upon Editor.js – the same editor about which the VC has already been an article. According to the authors from the Codex team, it is this tool that is used to write articles on VC.ru, TJ and DTF.
The main concept is the block structure and pure data in the form of JSON at the output. Unlike most editors, where the user works with the text inside one edited wrapper, in Editor.js, each structural element of the article – a block is a separate editable element. Blocks can be any: paragraphs, headlines, quotes, lists, images, tweets, polls and so on.
Supported blocks
From the box, the framework supports seven types of blocks: title, paragraph, image with a signature, link, listed / bulllet sheet, separator and pure HTML.
Parsing content
JSON Data can be given to both Backend APIs and lie locally in the gang or memory of a smartphone – preparation for its use will be the same and as simple as possible in any case. In short:
/// json data Data: Data turn into a list of blocks ready for drawing
Let Myblocks = Try Ejkit.shared.Decode (Data: Data)
Connection on the screen
To draw screens with a screens, we almost always use UicollectionView instead of the UitableView due to the greater flexibility of Leiaut. Therefore, the support of the collection was made in the first place. I will calm the tables of tables – their support is easily added by an adapter according to the sample of the collection.
There are two main scenarios of the layout of layout on the screen. The first – when your screen consists only of Editor.js blocks. This is as simple as possible through the adapter:
The second scenario is if you need to integrate blocks into an existing screen with a collection, in any place. To do this, it is convenient to use Ejcollectionrenderer, which directly implements the Datasource and Delegate collection methods and allows you to add blocks to the collection in any convenient order. An example of such integration is in Readme on GitHub.
Castomization of styles
In most cases, each project has its own design system, that is, its own dimensions of fonts, indentes and colors.
Consider the basic customization on the example of headlines:
{
“Type”: “Header”,
“Data”: {
“Text”: “Header 1”,
“Level”: 1
}
}
Suppose we want to change the font size for each header level, level them in the center and significantly increase indentation from above and below. The ejheaderblocktyle protocol is responsible for the title style, which needs to be implemented:
We connect the style:
Ejkit.shahed.set (Style: Customheaderterstyle (), For: Ejnativeblocktype.header)
As a result, we get the planned formatting without any changes in the Ved code or in json data:
Cash blocks
Absolutely any block can be built into the scroll canvas, and for this you will not need to write too much code.
A guide to modern css colors with RGB, HSL, HWB, Lab and LCH
A review of modern approaches to the description of flowers in CSS from Michelle Barker. Features of use, support in browsers and other useful details.
SaAS UX: 5 Ways to Improve The Scannability of the Plan Matrix
Sally Collins from Baymard gives tips on designing complex tables comparison tables.
4 Ways to doCument Your Design System with Storybook
Varun Vachhar shows different ways to configure Storybook to describe the principles of design and other important sections besides the components themselves. The description of the components can also be built into any other living Haydline.
Is your MVP Design Minimal and Viable? ENSURING EVERYONE GETS VALUE – Behaviral Design Models
Nacho Parietti offers three models of user behavior that will make MVP more successful. They are based on the connection of behavior and values for people.
Designops Summit 2021 Resource List
The DESIGNOPS Summit 2021 conference was held from September 29 to October 1 online. Rosenfeld Media collected a ton of links and other materials for each performance.
Accessibility Myths
A mini-site collects myths and misconceptions about support for Accessible.
The Daily Heller: The Assistant, Jayme Odgers, Works for Paul Rand
Jayme Odgers, an assistant to the legendary designer Paul Rand, told many interesting details about his work process and customer relationships. He focused on his vision and did not involve the client in the process. Although it turned out legendary.