1Ramp Updates - Improved Reply Editor, Onboarding Pages, Code Splitting and more

in utopian-io •  6 years ago 



1Ramp is available on Web and Android

Repository

https://github.com/hapramp/alpha-web


1. Improved Reply Editor

Screenshot 2019-02-04 at 5.26.20 PM.png

The reply editor used earlier consisted of only one line and was not suitable for the application. But with markdown editor introduced in the web app, it was fairly easy to use it for writing replies too.

1.1. Isolating and customizing MarkdownEditor

The markdown editor was dependent on the redux state to get the content. This would prevent us from using the component directly as the reply editor.

This involved removing logic to get/set content from redux state and plugging them in as parent props.

Screenshot from 2019-01-30 16-04-37.png

After we had isolated the component state from redux, we had to make some more changes to make it look better when using as the reply editor. This included specifying the props to hide redundant texts inside the component, allowing to set initial rows and specifying if the borders should be shown for the component.

1.3. Integrating it with the CreateReply Component

After the changes mentioned above, we were now good to use MarkdownEditor inside the component which renders UI for creating a reply.

Reply text is stored in the component state and is initially set to @{parent_author} for the post. The markdown editor is then rendered with 1 rows initially and ability to update its content using parent component's state.

The onReplyPosted prop can be passed in the CreateReply component which allows the parent component to take actions as the reply gets posted.

Screenshot from 2019-01-30 16-15-25.png

1.4. BONUS: Fixing auto update replies after posting one

The earlier method used to get the state for a post from Steem stopped sending the parent post in content and hence the comments were not getting updated as they were posted.

The comments are now updated using the special action which gets triggered after fetching content for a post and replies are set accordingly for the post.

1.5. Pull Requests

#144: Use markdown for comment editor
#149: Add docs related to onboarding pages


2. Onboarding Pages

1Ramp is all about interests, communities, and contests on Steem. And now, we are at a stage that with every little update we are preparing for a beta launch (in a few months). So it is time to put up a friendly and meaningful welcome message for the visitors. The logged out users will see onboarding pages introducing them to 1Ramp.

ezgif.com-video-to-gif (4).gif

2.1. Making BodyModal reusable

The modal used earlier for displaying rating could be used at other places too. So after refactoring the PostRatings components, we had the BodyModal which could be used anywhere in the app.

What this basically did was use the props from parent component and override a few for custom behavior such as enabling/disabling the scroll for document, selecting parent, etc.

For detailed changes, check out this diff - https://github.com/hapramp/alpha-web/pull/147/commits/88ac8b28df67a8b0b1e5ecefceb8817bc0d0a858.

2.2. The Onboard component

This component is rendered whenever the app decides to show the onboarding. It uses the BodyModal and has a collection of pages (called overlayPages) that it needs to show -

carbon1.png

The onboarding is showed when both of the following is true -

  • A cookie specific to onboarding is not set.
  • The user is not logged in.

If both of this is true, the redux action to show the onboarding is triggered after 5 seconds and the modal is shown.

The state of onboarding (the current page to show and if we want to show the onboarding) is stored with redux. Initially, the onboarding is set to be hidden and the default page is 0. This changes based on the different actions and constraints are set to not render the current index useless.

Once the user sees the onboarding, the cookie is set and it won't re-appear on the next reload.

2.3. Auth required components and Onboard

The Onboard component has a page which prompts users to sign in to the app using SteemConnect. This same page is used when a user tries to take an action which only signed in users can take (e.g. comment and rate).

For achieving this, we have an action called showSignIn which set's the current page to the onboarding page -
carbon2.png


3. Code Splitting and Optimized Bundles

App size plays a significant rate in user experience if we talk about the first load of the web app. The final bundled size for the 1Ramp Alpha web app was over 800kB - which made it load slowly in almost all conditions.

To resolve this, a few steps were taken. Let's take a look at them one-by-one.

3.1. Code Splitting

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.

- Webpack Official Guide

For the app, components are split based on the routes using react-loadable. We used route based splitting here to load the required code only when we are on the route that uses it.

Following are the different bundles generated after splitting the components -

carbon3.png

3.2. Source Map Analyzer

To make proper optimizations for the overall size of the app, we need to know that which components are taking up the most of our space. There are many plugins in JS which help us find this out.

We used source-map-explorer based on the create-react-app documentation.

Once we had the numbers, things were clear about which dependencies were taking a lot of space and could be removed or optimized.

3.3. Firebase was causing all the fire

The firebase dependency is the single most significant factor for the large bundle size of the application. And to make things worse, it was not even used as of now - it was used long back in the app.

Just removing Firebase completely made the app much lighter.

3.4. UIKit and New Notifications

uikit was responsible for a significant amount of bundle size but all it did was showing toasts in the app. So we decided to remove the dependency altogether and move to some lighter solution - react-toastify.

It had all the things we needed and was much smaller in size. Also, it was very easy to change the existing code to utilize this new library (see diff).

3.5. Optimizing other dependencies

  • showdown was used to convert markdown to HTML at few places but was taking too much space and could be replaced with the method which converts post body to HTML.
  • lodash imports were optimized to only use the function needed in a file.
  • Redundant fonts and other resources were fixed in the entry HTML (see diff).

3.6. Pull requests


4. And More...

4.1. "Sign in to Participate" in 1Ramp competitions

Earlier, the participate button was simply hidden from the view if the user was signed out. With #146, the users will now see a button saying "Sign in to Participate" and would take them to SteemConnect login page if clicked.

This used the newly introduced SignInButton which takes into account the current location of the map and wraps its children inside a hyperlink which points to the SteemConnect login page.

4.2. Consistent headings in Posts

There was also a small change which made headings consistent in the posts. Earlier, different headings were of different colors and non-uniform sizes. But with #145, it was fixed.


5. What's Next?

5.1. Contests on 1Ramp --

So far we've hosted 12 contests and participants have won 129 Steem in prizes. From the time we released the contest feature on 1Ramp, we reserved its access to limited accounts as we were testing how this feature will turn out. We are using our Android app to host contests and declare winners and we are loving the ease and experience. Soon this feature will be available for all the 1Ramp users on our web and android app.

Screenshot 2019-02-04 at 10.22.36 PM.png

Don't forget to check out the latest competitions: "Finish this story" and "caption this photo".

5.2. We need your feedback

We are building a platform on Steem where anyone with creative interests can come together, engage with each other, participate in the communities, and compete in the contests. We imagine an exciting place on Steem with a friendly and familiar interface and experience. We invite you to try out 1Ramp and give us your feedback.



logo_hapramp_regular@48px.png

1Ramp is a Social Media platform for creators (powered by Steem blockchain). On 1Ramp, you can join communities of your interest: Art, Dance, Design, Fashion, Film, Literature, Photography, and Travel and earn rewards for sharing your work. We are on a mission to give all creative communities one stage where you can compete, collaborate, and make good art.
1Ramp is Available on Google Play and Web.

Join the conversation on our Discord or write us at [email protected] Communities_on_1Ramp.png Twitter | Medium | Instagram | Facebook

"

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Thanks for the review, @helo.

Will keep in mind to merge PRs before listing them in the blogs.

Thank you for your review, @helo! Keep up the good work!

Great looking updates, thats a lot for one release, really look forward to seeing 1Ramp improve I think it has bags of potential

@chekohler Thanks!

Hi @singhpratyush!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 1 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 8 SBD worth and should receive 146 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

great