Hyperapp + Parcel
In this post, we will look at two new tools from the world of front-end development. Both are designed with simplicity and ease of use. The first tool is a very small Hyperapp front-end framework, and the second is Parcel bandler. Together they can be the best choice for writing lightweight applications in early 2018.
I usually use React & Webpack to develop interactive web applications. But often the bootstrapping of a new project using this stack takes too much time and looks cumbersome. Using React in the case when I need a simple and not large interactive widget with search and display prices, looks like overkill.
The main feature of Hyperapp is its size, only 1kb. React & Redux users will feel right at home, they are very similar with Hyperapp.
')
Hyperapp's state management is inspired by the Elm approach, which inspired Redux in its time.
The concept of an imbueble state and action games that return a new state is very similar to the one used in Redux. However, there are no reduders in Hyperapp, there are only actions that take arguments and return a new state (asynchronous actions that return promises are also present).
Parcel is a new kind of front-end bandler, a kind of faster and pre-configured webpack. I'm a fan of webpacks, but like any other, I can see that the configuration of webpacks is rather cumbersome.
Parcel out of the box provides HOC (hot module replacement) and code-splitting. To my surprise, after importing the .sass file, after running the parcel server devs, it automatically installed node-sass depending on and compiled a CSS file for me! It is also worth noting that parcel is unrealistically fast.
We will write an application using Hyperapp & Parcel - very simple, it will simply display basic user information using the Github API.
Link to ready-made solution
Let's start by creating a new directory and installing the necessary dependencies:
Along with the main tools that interests us, we installed babel presets for trapping code under the old environments.
Now let's add the index.html and index.js files:
index.html
index.js
So let's add the launch scripts for the server and build devs to package.json:
Run the virgin $ npm start server at localhost: 1234 in the browser, our page will be available and in the console you can see the result of console.log from index.js.
Ok, now the hyperapp app. For simplicity, we will use ES6 and JSX - using the babel compiler. Fortunately, it is in Parcel by default and all we need to do is specify the env preset and JSX compilation under Hyperapp. (Instead of React.createElement, the function h should be called).
Create a .babelrc file in the project root:
At this point, we have finished setting up our environment and can begin to write the application. Let's start with a simple Hyperapp view:
Since Parcel uses hot reloads, you will immediately see the result.
The code is very simple and does not require any deep knowledge of Hyperapp.
We import the necessary from Hyperapp, create a view function that is responsible for displaying the content and renders it all in the body of the page using the app function.
Now let's do a Github user info. First of all, we need some state in order to store user input and data obtained from the API. (As mentioned at the beginning, the component in Hyperapp does not have its own website).
We also need a way to change this state. Changes to the state in Hyperapp are similar to how it is done in Elm and Redux and are represented as functions that take a state with an action and return a new state:
In our case, the actions will look like this:
As you can see the updateUsername is asynchronous and uses another action to change the state.
Of course, we will need the getUserData function. We will use the Github API to retrieve information from a Github account whose nickname the user entered.
In order not to pull the API on each character, we will use debounce.
Create a style file ( you can take a copy ) .sass and import it into index.js
And also update the view:
That's all! Our little application is ready.
Hyperapp and Parcel are a great example of how developer tools are evolving. There are many ideas and approaches for creating front-end applications with a rich interactive interface. Some of them quickly adapt to new realities and needs, and some of them will be left behind in this wondrous world of Javascript development. React & Redux is a very popular choice among developers and their key features are used in Hyperapp. Webpack, in turn, influenced the world of bandlers and set new standards that Parcel is more than satisfying and who knows, maybe in the future it will take the lead. Evolution is also the reason why we should not try to use the same set of tools to solve each new problem.
I usually use React & Webpack to develop interactive web applications. But often the bootstrapping of a new project using this stack takes too much time and looks cumbersome. Using React in the case when I need a simple and not large interactive widget with search and display prices, looks like overkill.
Hyperapp
The main feature of Hyperapp is its size, only 1kb. React & Redux users will feel right at home, they are very similar with Hyperapp.
')
Hyperapp is like a tiny version of React RickHyperapp uses the Virtual DOM system to compute DOM updates, and also pursues the same abstraction of components and elements over HTML, which allows using JSX. The key difference is that the components do not have a state - there is only one global state for the entire application and all components are represented as stateless.
Hyperapp's state management is inspired by the Elm approach, which inspired Redux in its time.
The concept of an imbueble state and action games that return a new state is very similar to the one used in Redux. However, there are no reduders in Hyperapp, there are only actions that take arguments and return a new state (asynchronous actions that return promises are also present).
Parcel
Parcel is a new kind of front-end bandler, a kind of faster and pre-configured webpack. I'm a fan of webpacks, but like any other, I can see that the configuration of webpacks is rather cumbersome.
Parcel out of the box provides HOC (hot module replacement) and code-splitting. To my surprise, after importing the .sass file, after running the parcel server devs, it automatically installed node-sass depending on and compiled a CSS file for me! It is also worth noting that parcel is unrealistically fast.
And so, how do I use these two tools?
We will write an application using Hyperapp & Parcel - very simple, it will simply display basic user information using the Github API.
Link to ready-made solution
Let's start by creating a new directory and installing the necessary dependencies:
mkdir hyperparcel && cd $_ && npm init -y && npm i hyperapp parcel-bundler babel-plugin-transform-react-jsx babel-preset-env Along with the main tools that interests us, we installed babel presets for trapping code under the old environments.
$ _ means "argument of the last command"
Now let's add the index.html and index.js files:
index.html
<html> <body> <script src="./index.js"></script> </body> </html> index.js
console.log('hello parcel') So let's add the launch scripts for the server and build devs to package.json:
... "start": "parcel index.html", "build": "parcel build index.html --public-url ./" ... Run the virgin $ npm start server at localhost: 1234 in the browser, our page will be available and in the console you can see the result of console.log from index.js.
Ok, now the hyperapp app. For simplicity, we will use ES6 and JSX - using the babel compiler. Fortunately, it is in Parcel by default and all we need to do is specify the env preset and JSX compilation under Hyperapp. (Instead of React.createElement, the function h should be called).
Create a .babelrc file in the project root:
{ "presets": ["env"], "plugins": [ [ "transform-react-jsx", { "pragma": "h" } ] ] } At this point, we have finished setting up our environment and can begin to write the application. Let's start with a simple Hyperapp view:
import { h, app } from 'hyperapp' const view = () => <div> hello hyperapp </div> app({}, {}, view, document.body) Since Parcel uses hot reloads, you will immediately see the result.
The code is very simple and does not require any deep knowledge of Hyperapp.
We import the necessary from Hyperapp, create a view function that is responsible for displaying the content and renders it all in the body of the page using the app function.
Now let's do a Github user info. First of all, we need some state in order to store user input and data obtained from the API. (As mentioned at the beginning, the component in Hyperapp does not have its own website).
const state = { username: '', userData: null, } We also need a way to change this state. Changes to the state in Hyperapp are similar to how it is done in Elm and Redux and are represented as functions that take a state with an action and return a new state:
const nameChangeAction = (name) => (state, actions) => ({...state, name}) In our case, the actions will look like this:
const actions = { updateUsername: (username) => (state, actions) => { getUserData(username).then(actions.setUserData) return { username } }, setUserData: userData => state => ({ userData }) } As you can see the updateUsername is asynchronous and uses another action to change the state.
Of course, we will need the getUserData function. We will use the Github API to retrieve information from a Github account whose nickname the user entered.
In order not to pull the API on each character, we will use debounce.
npm i debounce-promise babel-preset-es2015 const getUserDataFn = username => { return fetch(`https://api.github.com/users/${username}`) .then(res => res.json()) } const getUserData = debounce(getUserDataFn, 700) Create a style file ( you can take a copy ) .sass and import it into index.js
And also update the view:
const view = (state, actions) => <main> <div>Search github users:</div> <input type='text' className='searchInput' value={state.username} oninput={e => actions.updateUsername(e.target.value)} /> <br/> <div className='userCard'> {state.userData ? ( <div> <img class='userCard__img' src={state.userData.avatar_url} /> <div class='userCard__name'>{state.userData.name}</div> <div class='userCard__location'>{state.userData.location}</div> </div> ) : ( <div> search 'em</div> )} </div> </main> app(state, actions, view, document.body) That's all! Our little application is ready.
Finally
Hyperapp and Parcel are a great example of how developer tools are evolving. There are many ideas and approaches for creating front-end applications with a rich interactive interface. Some of them quickly adapt to new realities and needs, and some of them will be left behind in this wondrous world of Javascript development. React & Redux is a very popular choice among developers and their key features are used in Hyperapp. Webpack, in turn, influenced the world of bandlers and set new standards that Parcel is more than satisfying and who knows, maybe in the future it will take the lead. Evolution is also the reason why we should not try to use the same set of tools to solve each new problem.
Source: https://habr.com/ru/post/348794/
All Articles