Blockchain as a Buzzword and the Importance of Design
The Era of Buzzwords
Many of you have probably heard of the term “buzzword” before, but what exactly is a buzzword and why does it rule the kingdom of software engineering? Taken from the Merriam-Webster dictionary, a buzzword is “an important-sounding usually technical word or phrase often of little meaning used chiefly to impress laymen. In the world of technology, people are under the assumption that dishing out words such as “neural networks”, “internet of things (IoT)”, “virtual reality (VR)”, and “machine learning (ML)” somehow add a sense of credibility to the product they are working on.
Due to the recent cryptocurrency stock surge and the growing interest of companies to adopt decentralized solutions for their businesses, the term “blockchain” has topped the list as one of the quintessential buzzwords being used in 2017.
In my own personal opinion, I believe that many developers are falling prey to this buzzword phenomenon and are misusing the term in order to bring more attention to their work. Most people who misuse the term typically fail to answer this important question: Why is a decentralized solution that utilizes blockchain technology better than an existing centralized solution? This is a question that the members of Blockchain at Berkeley (B@B) have always emphasized and taken into consideration before exploring any blockchain-based solution in depth.
With more and more solutions continuously being proposed, it is becoming increasingly important to convince people that your use case actually benefits from blockchain technology. From my own personal experience at B@B, I have a suggestion that may help your use case sound convincing; make a functioning and clean user interface that serves as the proof of concept of your startup idea by elucidating the usefulness of the key features of your app.
“Ugh, Frontend….Why?”
Since the concept of blockchain is very abstract and often difficult to explain, having a well structured user interface can be the most useful tool in your belt when trying to transform the abstractness of the technology into something tangible that the average person can fully grasp.
In many developer circles at the University of California, Berkeley, it is not uncommon to experience a detachment from the importance of the user interface amongst machine learning, blockchain, and backend enthusiasts. More often then not, developers tend to be concerned with ensuring that the product performs flawlessly and do not focus on the ease of use or the overall design of the product.
As a developer, I consider my own interests to lie in the backend of products that utilize blockchain technology. However, I have come to recognize that even for non-design experts, acknowledging the importance of frontend development in the success of a product is crucial. Especially during the early stages of development it can be argued that a clean frontend is the more useful part of your codebase. Making a website that demonstrates how your product would function once completed (even if at first some things are hard-coded and the functionality is limited) is a great way to prove to people that your product solves a real problem.
Easy to Say, Difficult to Do?
So how do you make a pretty-looking website to convey the value proposition of your blockchain-based product? Are you not an artsy person or an amazing designer? Don’t worry! You don’t need to be. Your website just needs to be organized and clean. Once you’ve made one of these, you can make many more with ease.
A good foundation in HTML and CSS is important. If you know HTML, CSS and jQuery, you are ready to make your own static website. Many people make their personal websites after mastering these technologies.
However, most websites are not static and it is likely that your pilot blockchain project will need to be linked to some backend as well. There are frameworks that help can you display data including: AngularJS, MeteorJS, ReactJS, etc. People are often divided on which one they should adopt and the internet is filled with opinion columns about why one is better than the other. There are even some people who assert that you can use many of them in conjunction. I’m not here to tell you which one to choose, but a good starting point would be to understand why each one makes a designer’s experience easier. Once you’ve don that, then you can choose the one whose foundational principles seem the most intuitive.
I chose React because I really liked its interpretation of UI elements as a function of properties and state. To learn React you need to understand how it thinks of components, properties and state, and how it uses uni-directional data flow. Having a strong understanding of these React concepts will set you up to make a clean website for any project in a matter of no time.
Also, you always want to make your website responsive so that it looks good on different screen sizes in different orientations. Using the positioning properties well on CSS is certainly helpful, but you should also eventually learn CSS Media Queries to help you with this task.
Although the prevailing mindset amongst coders is that design should be left to the design experts, everybody on the team should contribute. After all, this component is tremendously crucial when attempting to give someone a good first impression of your project. Besides, you can never make a good full-stack project without having a semi-decent frontend.
___________________________________________________________________
Resources to Help Get You Started:
To Understand the Process: https://facebook.github.io/react/docs/thinking-in-react.html
State: https://facebook.github.io/react/docs/state-and-lifecycle.html
Tutorial to Make First React App: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm#at_pco=smlwn-1.0&at_si=58d1b862b5ee1983&at_ab=per-2&at_pos=0&at_tot=1
Tips on How to Make Your Website Responsive to Different Screen Sizes: https://medium.com/@mustwin/responsive-react-9b56d63c4edc
Multi-Page Websites: https://www.davidmeents.com/blog/journey-into-react-part-3-navigating-between-webpages-with-react-router/
Full-Stack React App that Elucidates How React is Used in Production: http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/
