{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Truong Hoang Dung","description":"The latest articles on DEV Community by Truong Hoang Dung (@revskill10).","link":"https:\/\/dev.to\/revskill10","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F89054%2F9d7ed786-6b65-4790-a3ab-ad9198b07689.jpeg","title":"DEV Community: Truong Hoang Dung","link":"https:\/\/dev.to\/revskill10"},"language":"en","item":[{"title":"Serverless and SPA, a perfect match in heaven","pubDate":"Tue, 02 Apr 2019 08:43:14 +0000","link":"https:\/\/dev.to\/revskill10\/serverless-and-spa-a-perfect-match-in-heaven-omk","guid":"https:\/\/dev.to\/revskill10\/serverless-and-spa-a-perfect-match-in-heaven-omk","description":"

Recently, Next.JS V8 allows you to build each endpoint into a serverless function.
\nIt's one of the coolest thing that happens to frontend team.<\/p>\n\n

Now, they not only can split frontend in a SPA, they can split backends, too.<\/p>\n\n

NextJS was and is truly an inspiration. <\/p>\n\n

What can frameworks learn from it ?<\/p>\n\n

Now you know, let's just kill the big, monothlic backend server. And please, please seriously split it for fun and profit.<\/p>\n\n

2019 will be a big milestone in technology for us, universal developers.<\/p>\n\n

I'm happy for this transition, and how about you ?<\/p>\n\n","category":["serverless","spa","javascript"]},{"title":"A React Hook for universal routing","pubDate":"Wed, 13 Mar 2019 08:09:53 +0000","link":"https:\/\/dev.to\/revskill10\/a-react-hook-for-universal-routing-6dk","guid":"https:\/\/dev.to\/revskill10\/a-react-hook-for-universal-routing-6dk","description":"

I'm using @reach\/router<\/code> and love its simplicity.
\nBut i love to use React Hook to get the page params and query string, so i make a simple hook for it.<\/p>\n\n

Firstly, we need a pageContext<\/code> for page component.<\/p>\n\n

pageContext.ts<\/code>:
\n<\/p>\n\n

import<\/span> React<\/span>,<\/span> {<\/span> createContext<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\n\nconst<\/span> pageContext<\/span> =<\/span> createContext<\/span>({}<\/span> as<\/span> any<\/span>);<\/span>\n\nexport<\/span> const<\/span> withPageContext<\/span> =<\/span> (<\/span>Component<\/span>:<\/span> any<\/span>)<\/span> =><\/span> (<\/span>props<\/span>:<\/span> any<\/span>)<\/span> =><\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>pageContext<\/span>.<\/span>Provider<\/span> value<\/span>=<\/span>{{...<\/span>props<\/span>}}<\/span>><\/span>\n      <<\/span>Component<\/span> {...<\/span>props<\/span>}<\/span> \/<\/span>>\n<\/span>    <<\/span>\/pageContext.Provider<\/span>>\n<\/span>  );<\/span>\n};<\/span>\n\nexport<\/span> default<\/span> pageContext<\/span>;<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
This also includes a HOC to inject props<\/code> into pageComponent to be consumed with useContext<\/code> hook later.<\/p>\n\n
Second, we need to wrap this pageContext.Provider<\/code> to all Route component:
\nRoute.tsx<\/code>:
\n<\/p>\n\n
import<\/span> React<\/span>,<\/span> {<\/span> \n  FunctionComponent<\/span> \n}<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\nimport<\/span> {<\/span> \n  RouteComponentProps<\/span> \n}<\/span> from<\/span> '<\/span>@reach\/router<\/span>'<\/span>;<\/span>\nimport<\/span> {<\/span>\n  LoadableComponent<\/span>\n}<\/span> from<\/span> '<\/span>@loadable\/component<\/span>'<\/span>;<\/span>\nimport<\/span> {<\/span> withPageContext<\/span> }<\/span> from<\/span> '<\/span>.\/pageContext<\/span>'<\/span>;<\/span>\n\ntype<\/span> Props<\/span> =<\/span> {<\/span> component<\/span>:<\/span> FunctionComponent<\/span> |<\/span> LoadableComponent<\/span><<\/span>{}<\/span>><\/span> }<\/span> &<\/span> RouteComponentProps<\/span>;<\/span>\n\nconst<\/span> Route<\/span>:<\/span> FunctionComponent<\/span><<\/span>Props<\/span>><\/span> =<\/span> ({<\/span> component<\/span>,<\/span> ...<\/span>rest<\/span> })<\/span> =><\/span> {<\/span>\n  const<\/span> Component<\/span> =<\/span> withPageContext<\/span>(<\/span>component<\/span>);<\/span>\n  return<\/span> (<\/span>\n    <<\/span>Component<\/span> {...<\/span>rest<\/span>}<\/span> \/<\/span>>\n<\/span>  );<\/span>\n};<\/span>\n\nexport<\/span> default<\/span> Route<\/span>;<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
And lastly, the thing we need, a useRouter<\/code> hook:
\nuseRouter.ts<\/code>
\n<\/p>\n\n
import<\/span> pageContext<\/span> from<\/span> '<\/span>.\/pageContext<\/span>'<\/span>;<\/span>\nimport<\/span> {<\/span> useContext<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\nimport<\/span> {<\/span> parse<\/span>,<\/span> parseUrl<\/span> }<\/span> from<\/span> '<\/span>query-string<\/span>'<\/span>;<\/span>\nconst<\/span> isServer<\/span> =<\/span> typeof<\/span>(<\/span>window<\/span>)<\/span> ===<\/span> '<\/span>undefined<\/span>'<\/span>;<\/span>\n\nconst<\/span> useRouter<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\n  const<\/span> {<\/span> location<\/span>,<\/span> ...<\/span>rest<\/span> }<\/span> =<\/span> useContext<\/span>(<\/span>pageContext<\/span>);<\/span>\n  const<\/span> queryParams<\/span> =<\/span> isServer<\/span> ?<\/span>  \n    parseUrl<\/span>(<\/span>location<\/span>.<\/span>pathname<\/span>).<\/span>query<\/span> :<\/span> \n    parse<\/span>(<\/span>location<\/span>.<\/span>search<\/span>);<\/span>\n\n  const<\/span> query<\/span> =<\/span> {<\/span>\n    ...<\/span>queryParams<\/span>,<\/span>\n    ...<\/span>rest<\/span>,<\/span>\n  };<\/span>\n\n  return<\/span> {<\/span> query<\/span> };<\/span>\n};<\/span>\n\nexport<\/span> default<\/span> useRouter<\/span>;<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
Here, i mapped all props<\/code> and query string<\/code> into a query<\/code> property returned by useRouter<\/code> and we've done !<\/p>\n\n
\n  \n  \n  Usage:\n<\/h1>\n\n
Firstly, declare your routes with our new Route<\/code> component:<\/p>\n\n
App.tsx<\/code>:
\n<\/p>\n\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\nimport<\/span> Route<\/span> from<\/span> '<\/span>.\/Route<\/span>'<\/span>;<\/span>\nimport<\/span> {<\/span> \n  Router<\/span> \n}<\/span> from<\/span> '<\/span>@reach\/router<\/span>'<\/span>;<\/span>\nimport<\/span> loadable<\/span> from<\/span> '<\/span>@loadable\/component<\/span>'<\/span>;<\/span>\n\nconst<\/span> User<\/span> =<\/span> loadable<\/span>(()<\/span> =><\/span> import<\/span>(<\/span>'<\/span>components\/User<\/span>'<\/span>));<\/span>\n\nconst<\/span> App<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>Router<\/span>><\/span>      \n      <<\/span>Route<\/span> component<\/span>=<\/span>{<\/span>User<\/span>}<\/span> path<\/span>=<\/span>\"<\/span>\/users\/:userId<\/span>\"<\/span> \/><\/span>\n    <<\/span>\/Router<\/span>>\n<\/span>  );<\/span>\n};<\/span>\n\nexport<\/span> default<\/span> App<\/span>;<\/span>\n\n<\/code><\/pre><\/div>\n\n\n\n
Secondly, use useRouter<\/code> in our User<\/code> component:<\/p>\n\n
User.tsx<\/code>:
\n<\/p>\n\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\n\nconst<\/span> User<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\n  const<\/span> {<\/span> query<\/span> }<\/span> =<\/span> useRouter<\/span>();<\/span>\n  const<\/span> {<\/span> userId<\/span> }<\/span> =<\/span> query<\/span>;<\/span>\n  return<\/span> <<\/span>div<\/span>><\/span>You<\/span> requested<\/span> {<\/span>userId<\/span>}<\/span><<\/span>\/div><\/span>;\n<\/span>};<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
\n  \n  \n  Inspiration:\n<\/h2>\n\n
This is inspired by react-router<\/code> and nextjs<\/code>.<\/p>\n\n","category":["react","hook"]},{"title":"What does a UI Component mean, finally ?","pubDate":"Thu, 07 Feb 2019 05:47:16 +0000","link":"https:\/\/dev.to\/revskill10\/what-does-a-ui-component-mean-finally--13nl","guid":"https:\/\/dev.to\/revskill10\/what-does-a-ui-component-mean-finally--13nl","description":"
I need to clarify myself some terminologies that i found too ambigous, or useless to apply in daily programming, some of them is: UI, Component, Behaviour, View, Model.<\/p>\n\n
I could describe a Component<\/code> as:
\n<\/p>\n\n
Component<\/span> =<\/span> function<\/span>(<\/span>behavior<\/span>,<\/span> view<\/span>)<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
What does behavior<\/code> mean ?
\n<\/p>\n\n
behavior<\/span> =<\/span> function<\/span>(<\/span>props<\/span>)<\/span> -><\/span> model<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
Yes, a behavior<\/code> is a function, which receives props<\/code> as input, and return a model<\/code><\/p>\n\n
A model<\/code> in this case is just any data structure.<\/p>\n\n
What does a view<\/code> mean ?
\n<\/p>\n\n
view<\/span> =<\/span> function<\/span>(<\/span>model<\/span>)<\/span> -><\/span> UI<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
A view<\/code> is a function which receives a model<\/code> and returns a UI<\/code> .<\/p>\n\n
UI<\/code> means User Interface, is what a user could see, feel and interact with.<\/p>\n\n
\n  \n  \n  Example:\n<\/h2>\n\n
Let's make a Counter<\/code> component with React and Hooks !<\/p>\n\n
This is the makeComponent<\/code>, which receives a behavior<\/code>, a view<\/code> and returns a Component<\/code>
\n<\/p>\n\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\n\nconst<\/span> Component<\/span> =<\/span> ({<\/span>behavior<\/span>,<\/span> view<\/span>,<\/span> ...<\/span>rest<\/span>})<\/span> =><\/span> {<\/span>\n  const<\/span> props<\/span> =<\/span> behavior<\/span>(<\/span>rest<\/span>)<\/span>\n  const<\/span> View<\/span> =<\/span> view<\/span>\n  return<\/span> <<\/span>View<\/span> {...<\/span>props<\/span>}<\/span> \/<\/span>>\n<\/span>}<\/span>\nconst<\/span> makeComponent<\/span> =<\/span> (<\/span>behavior<\/span>,<\/span> view<\/span>)<\/span> =><\/span> {<\/span>\n  return<\/span> (<\/span>props<\/span>)<\/span> =><\/span> <<\/span>Component<\/span> {...<\/span>props<\/span>}<\/span> behaviour<\/span>=<\/span>{<\/span>behaviour<\/span>}<\/span> view<\/span>=<\/span>{<\/span>view<\/span>}<\/span> \/<\/span>>\n<\/span>}<\/span>\n\nexport<\/span> default<\/span> makeComponent<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
The Counter<\/code> behavior:
\n<\/p>\n\n
import<\/span> {<\/span>useState<\/span>,<\/span> useCallback<\/span>}<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\n\nconst<\/span> behavior<\/span> =<\/span> ({<\/span>initialCount<\/span>})<\/span> =><\/span> {<\/span>\n  const<\/span> [<\/span>count<\/span>,<\/span> setCount<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>initialCount<\/span>)<\/span>\n  const<\/span> increment<\/span> =<\/span> useCallback<\/span>(()<\/span> =><\/span> setCount<\/span>(<\/span>count<\/span> +<\/span> 1<\/span>))<\/span>\n  const<\/span> decrement<\/span> =<\/span> useCallback<\/span>(()<\/span> =><\/span> setCount<\/span>(<\/span>count<\/span> -<\/span> 1<\/span>))<\/span>\n  return<\/span> {<\/span>initialCount<\/span>,<\/span> count<\/span>,<\/span> increment<\/span>,<\/span> decrement<\/span>}<\/span>\n}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
The Counter<\/code> view:
\n<\/p>\n\n
const<\/span> view<\/span> =<\/span> ({<\/span>initialCount<\/span>,<\/span> count<\/span>,<\/span> increment<\/span>,<\/span> decrement<\/span>})<\/span> =><\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>div<\/span>><\/span>\n        <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>increment<\/span>}<\/span>>+<<\/span>\/button<\/span>>\n<\/span>        <<\/span>div<\/span>><\/span>Current<\/span> count<\/span>:<\/span> {<\/span>count<\/span>}<\/span><<\/span>\/div<\/span>>\n<\/span>        <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>decrement<\/span>}<\/span>>-<<\/span>\/button<\/span>>\n<\/span>    <<\/span>\/div<\/span>>\n<\/span>  )<\/span>\n}<\/span>\n<\/code><\/pre><\/div>\n\n\n\n
Finally, let's make a Counter<\/code> component:
\n<\/p>\n\n
const<\/span> Counter<\/span> =<\/span> makeComponent<\/span>(<\/span>behavior<\/span>,<\/span> view<\/span>)<\/span>\n\nReact<\/span>.<\/span>render<\/span>(<\/span><<\/span>Counter<\/span> initialCount<\/span>=<\/span>{<\/span>0<\/span>}<\/span> \/>, body<\/span>)\n<\/span><\/code><\/pre><\/div>\n\n\n\n
Voilla, i got a clean React component !<\/p>\n\n
\n  \n  \n  But, is this MVC<\/code> ?\n<\/h2>\n\n
Yes ! The behavior<\/code> is exactly what does a controller<\/code> mean.<\/p>\n\n
\n  \n  \n  So, is a Component<\/code> the same as MVC<\/code> ?\n<\/h2>\n\n
No ! Component<\/code> has only two arguments: The V and the C, there's no M.<\/p>\n\n","category":["react","javascript","ui"]},{"title":"First-class testing","pubDate":"Sun, 27 Jan 2019 06:51:41 +0000","link":"https:\/\/dev.to\/revskill10\/first-class-testing-48fk","guid":"https:\/\/dev.to\/revskill10\/first-class-testing-48fk","description":"
Some years ago, i saw some frameworks like Ruby on Rails trying to put tests<\/code> folder in the same folder with dev codebase.<\/p>\n\n
What's wrong with this approach ?<\/p>\n\n