20000 Lieues Sous les Mers

What does Blockchain mean for front-end developers? [DevBlog]

Artur Basak
Aug 28, 2018 · 5 min read

Let’s talk a little bit about blockchain technology. Yes, yes, I know, I am a front-end engineer, but we may also tell you a little about this hyped technology.

In the Internet you can already find job advertisements — “Front-End Blockchain Developer”. It looks promising. What do you think about this?

I don't know what sense do employers put into this description, but I can tell you for sure that keyword “blockchain” in the project description for the front-end engineers, layout developers and designers means only one thing— display a lot of hashes on the UI.

Of course, the most important things are implemented on back-end side — transaction processing, communication with the blockchain node. Smart contracts logic is implemented on solidity language (in this case I mean Ethereum).

But blockchain and cryptocurrency world is a world of hashes. You identify transaction by hash as well as you identify account or smart contract also by hash. You are trying to find and compare transaction details in network scanners also by hash. So, hashes are everywhere.

Lition — Direct Trading Page

The Lition project has a lot of hashes on UI. User should have a possibility to identify transactions or addresses and be able to do it by hashes. Usually, user copies the hash value, for example, to check transaction additional details in the blockchain network scanner. It means that it’s very important to make the hash string not disruptive when we divide text into parts containing hashes — I mean tabs and spaces of course.

Producer Page

Anyway, it’s better to protect user from awkward copying at all. In our interface, we turned hashes into links leading to the scanner site.

Overview Page
Ropsten Network Scanner (Etherium)

Sometime displaying hashes on UI is not a great idea from UX perspective. For example that’s why we made this information collapsible in Recent Transactions table.

Mobile Layout for Overview Page
Mobile Layout for Overview Page

So, blockchain UI is new subtype of interfaces. And I can share most useful CSS properties for displaying hashes:

  • word-breakproperty specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box. Property is useful with the value break-all for displaying hashes in most cases.

Probably, I downplay the importance of the blockchain term on front-end side. If your client’s application should provide possibility to communicate with blockchain network directly, you certainly need to deal with a couple of APIs of the corresponding libraries. It means that this is not only about layout or CSS properties.

In our client application there is such an opportunity to interact with the blocking network directly. It is called Direct Trading or Advanced Trading — functionality for advanced users. With the help of special plug-in for browser — MetaMask, user can get information about open trading positions and perform transactions by passing the API of our server side, i.e. using the MetaMask account.

MetaMask in Brave browser

What does this mean for us? Actually nothing new, you need to learn the new JavaScript library for that. It’s our usual job.

In case with Ethereum, this is Web3.js library. In the rest, everything is within our concept. The functionality of Web3 lives in the corresponding service, interaction with the service occurs through the React.js and Dispatcher with Action Performers. In tests all this is covered by the same principles as the rest system components.

File path /src/services/web3/service.js
File path /src/action_performers/transactions.js
Direct Trading Page in Google Chrome (without MetaMask)

Thanks for your attention and in the next article let’s talk about testing on front-end side.

P.S. If you have any ideas, feedback's or thoughts please feel free to share with me.

2018, Artur Basak, Lition Tech Team

Previous article:

Next article:

Lition Blockchain

Blockchain: The standard blockchain for enterprises and…

Thanks to Nastassia Miatselitsa and Lena Beniash

Artur Basak

Written by

Lead UI Engineer at @tispr. Husband. Father of two kids. Passionate about Web, UI and Testing. Dilettante artist. Stamp collector. Living in Grodno, Belarus.

Lition Blockchain

Blockchain: The standard blockchain for enterprises and regulated markets

Artur Basak

Written by

Lead UI Engineer at @tispr. Husband. Father of two kids. Passionate about Web, UI and Testing. Dilettante artist. Stamp collector. Living in Grodno, Belarus.

Lition Blockchain

Blockchain: The standard blockchain for enterprises and regulated markets

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store