Web technology
Tuesday, July 7, 2020
Creating our own hamburger menu using CSS
Angular vs Vue vs React
Introduction
Initially javascript codes were executable only within the browser environment. But when Chrome open sourced its V8 engine, Node.js was born. Since then web development has taken a new turn. Now we can also use javascript outside the browser environment. This helps us to use it on our server side applications. Therefore with a single programming language we can develop both our front end as well as the back end too. This is the main reason behind developers switching towards MERN stack or MEAN stack. There is also significant development on front end with the advent of new javascript frameworks like Angular, React, Vue, Meteor etc. These frameworks help us build Single Page Applications. At present we have got lot of frameworks and developers get confused on choosing the right one. Come lets have a quick look at the three frameworks that has always been under comparison.
Angular vs Vue vs React
Angular
It is a type-script based web application framework developed by Google. Some of the popular websites that have been built with Angular are The Guardian, Lego, Paypal, Freelancer, UpWork etc. Angular has a large community to support developers.
Angular is best suited for Single Page Applications that require occasional updating. It uses real DOM to make changes. It uses two-way binding process that replicates all the changes made in the model into the views in a more secure and efficient way. It follows component based approach. Hence, the components can be reused as many times as required.
The drawback with Angular is the learning curve since its a complete framework which takes considerable amount of time to get accustomed to it. There are lot of features in Angular which will affect our performance when we translate our project into a heavy application.
React
React is a javascript library that was developed by Facebook in 2012. It has gained lot of popularity over these years. Some of the websites that are built on React are Facebook, Airbnb, Netflix etc. The react community is also large and hence there is always support for developers.
The main advantage of react is that it uses a Virtual DOM to make changes rather than real DOM. This makes it significantly faster. It follows component based architecture. We can build reusable components. Since react is a library the learning curve is not as steep as angular.
The disadvantage with react is that since its a library we need to make use of third party packages for most of our needs. Poor documentation is another major drawback of react. React uses JSX which is a syntax extension of HTML. It is seen as a barrier especially for the new developers.
Vue
Vue is the youngest of the three frameworks. It was developed with incredible features. to overcome the hurdles that developers were facing with react and angular.
It was developed by Evan You. It combines all the advantages of react and angular. It is the smallest of the three.
Vue has a more straight forward learning curve as compared to react and angular. It is the smallest of the three. Ideal for building small web applications and single page applications.
Monday, July 6, 2020
How to integrate React with Wordpress
What is React?React is a javascript library used for building Single Page Applications(SPAs). It was developed by Facebook. We can build user-interfaces for modern web applications in a much easier and better way.
What is Wordpress?
Wordpress is a Content Management System (CMS). It helps us to build a website without the need to write all the code. So anyone can create a website without technical knowledge. We just need to provide the content we need to display and select the way we want to display our content and Wordpress will take care of the rest.
What is a Headless CMS?
It doesn’t mean that our CMS is missing the header section. It means that our CMS is decoupled from the front end. It is a back end only Content Management System. Wordpress also provides a REST API by which we can access all our contents and we can display it on any device. It doesn’t care about where the data is getting displayed. It just stores and delivers our data.
Can we use React with Wordpress?
Yes, for sure we can use React with Wordpress. With React we can focus primarily on how to display the data and we can get the data using the Wordpress REST API.
How do we do that ?
Follow the steps mentioned below to use Wordpress with React.
Setting up our Wordpress application
First we need to set up our Wordpress site since it is going to be our source of data for the frontend React application.
All the posts that we have created in our wordpress can be accessed with the help of this endpoint.
This will return all the posts that we have written in our Wordpress site in JSON format.
To get a particular post we can make use of this endpoint.
Where id is the post id that we want to retrieve. The same can be done for adding, updating posts by using POST method.
Setting up our React application
Next we need to set up our front end which is going to be React. For this we need to have Node.js installed in our system. Run the following command on your terminal.
npx create-react-app
create-react-app wordpress-example
Now our project folder is ready and we can start creating our react app. We can make use of the fetch API or a third party package called axios to make our React app talk to our Wordpress back end. Fetch is an inbuilt api that helps us make API calls. Axios has some advantages when compared to the fetch api. Lets see how we can do it with the help of axios.
React + Wordpress
The best place to make our api calls within a react component is in componentDidMount(). Because this life cycle method gets called only after the first render. Hence, it's the ideal place for making asynchronous calls.
axios.get('https://example.com/wp-json/wp/v2/posts')
.then(response => {
let posts = response.data
this.setState({ posts })
})
So, now we have got our data from Wordpress. Similarly, we can also make POST requests to our back end to add new posts. It's the same procedure as we did before.
Conclusion
So now we have our React application talking to our Wordpress back end. We can also add custom post types. By default Wordpress has only posts and pages, but with the help of plugins we can add our own custom post types. Thus we can customize our Wordpress back end like the way we want it to be. We can use any technology for the front end. We can even make our mobile application talk to our Wordpress back end.
Creating our own hamburger menu using CSS
Hamburger menu Hamburger menu is a kind of menu that almost resembles the real hamburger. Hence, i...
-
Introduction Initially javascript codes were executable only within the browser environment. But when...
-
What is React? React is a javascript library used for building Single Page Applications(SPAs). It was developed by Facebook. We can build us...
-
Hamburger menu Hamburger menu is a kind of menu that almost resembles the real hamburger. Hence, i...