Learn by Doing — Building Medium RSS Viewer
ReactJS, Serverless Framework, AWS Lambda, API Gateway — Best way to learn to code is by Doing it.
I wanted to learn (at a very basic level) some of the new technologies and as being an engineer for more than last nine years I knew the best way to learn is by doing it.
The best way to learn to code is by Doing it.
So, I have decided to build very simple yet useful Single Page Application (SPA) using the following technology stake,
- ReactJS & ChartJS & Bootstrap 4 for frontend
- AWS Lambda(Node.js) & AWS API Gateway as a backend
- AWS S3 for the deployment of a website
- AWS CLI and Serverless Framework for CI/CD
- Git for version control system
What I have built?
The Medium has a very good user base of active writers, thinkers, and storytellers. I myself being active in the medium for the last six months has encouraged me to write on technologies and more.
I thought to build a simple website where one can find a list of blogs written by writers, thinkers, and storytellers. For example, you can find a list of my blogs by simply searching @bhargavshah2011
Yes, of course, you can do the same by searching them on the medium website. But as I mentioned, I wanted to learn a few technologies and wanted to build something which I would like to use, so decided to give try to simple Medium RSS Viewer.
What does it do?
The website is simply fetching most recent 50 stories information as well as profile information of author you have mentioned. You have to enter Medium “@username” for this to work.
How does it work?
It is a very simple architecture. The browser will call website which resides on AWS S3 (reactjs). Once a user has entered the “@username” site will make API call which goes through the API Gateway to AWS Lambda function.
AWS Lambda Function will return the required data in JSON and website will parse it in nice layout for you.
Live Demo — http://rssfeed2018.s3-website.eu-west-3.amazonaws.com/
The highlight of points which are learned —
1. What is JSX?
JSX and it stands for JavaScript eXtension. It might seem weird to have XML tags in your JavaScript, but it turns out to be super useful.
All of the React components have a render the function that specifies what the HTML output of our React component will be. JSX is a "language extension" that allows us to write JavaScript that looks like HTML.
Without JSX
class HelloWorld extends React.Component {
render() {
return (
React.createElement(
'div',
{className: 'container'},
React.createElement(
'span', { className: 'title' },
React.createElement(
'H3', { className:
'large' }, 'Hello world'
)
)
)
);
}
}With JSX
class HelloWorld extends React.Component {
render() {
return (
<div className='container'>
<span className='title'>
<h3 className='large'>Hello world</h3>
</span>
</div>
);
}
}Typically, compiling JSX is done by using a tool called Babel. When you use create-react-app babel is set up for you automatically.
2. What are Props and State?
Props:
React allows us to send data to a component using the same syntax as HTML: using attributes or properties. This is similar to passing the src attribute to an <img />tag. We can consider the property of the <img /> tag as a prop that we are set on a component called img.
We can access these properties inside a component using this.props from anywhere inside our component.
class Header extends React.Component {
render() {
return <h1>{this.props.title}</h1>
}
}State:
What if we want to change something in our component after the props have already been set?
While it's preferable to use props as much as we can (for speed and simplicity), sometimes we need to hold on to the state of a component. To handle this, React gives us the ability to define (and update) its state.
The state in a component is intended to be completely internal to the individual component and its children (i.e. accessed only by the component and any children it creates). Similar to how we access, the state can be accessed via this.state in a component. Whenever the state changes, the component re-renders.
3. How to draw interactive charts?
I have used a tool called “Chat.js”. This is super simple and fun to use the open source library. They have a wide range of charts from a simple bar chart to time scale chart to advance chart. I encourage to look for this option when you have display charts requirement. You can find samples at http://www.chartjs.org/samples/latest/
4. Serverless Framework:
Serverless is a very useful toolkit. I have used to do develop and deploying my code into AWS. I simply have written my AWS Lambda(node.js) and specify what memory my AWS Lambda function will use and how one to access my function. That’s it.
The serverless framework will do the setup of infrastructure for you. so that you can focus on the application.
Serverless is your toolkit for deploying and operating serverless architectures. Focus on your application, not your infrastructure.
Setting up the serverless framework and using it is fun. I have written an introductory blog on the same. You can read it here,
So let me warp it here — There are many tools which you can use for building a simple serverless application. There are many architectures which you can follow for your serverless application. If you want me to write more on serverless architecture topic then please let me know in a comment.
Let’s start exploring by building/acting on simple IDEAs.
