{"id":335,"date":"2021-02-24T02:38:20","date_gmt":"2021-02-24T02:38:20","guid":{"rendered":"https:\/\/lamsao.dev\/blogs\/?p=335"},"modified":"2022-04-04T10:36:19","modified_gmt":"2022-04-04T10:36:19","slug":"egany-front-end-tech-stack","status":"publish","type":"post","link":"https:\/\/egany.com\/blogs\/egany-front-end-tech-stack\/","title":{"rendered":"EGANY Front-End Tech Stack"},"content":{"rendered":"<h2>L\u1eddi m\u1edf \u0111\u1ea7u<\/h2>\n<p>Sau chu\u1ed7i b\u00e0i <em>V\u1ecdc c\u00f9ng Th\u00e0nh<\/em> kh\u00f4ng m\u1ea5y th\u00e0nh c\u00f4ng t\u1ea1i <a href=\"https:\/\/devnow.vn\/\" rel=\"nofollow noopener\" target=\"_blank\">DevNow<\/a>, c\u1ee9 ng\u1ee1 l\u00e0 s\u1ebd kh\u00f4ng vi\u1ebft blog n\u1eefa. Tuy nhi\u00ean, h\u00f4m nay c\u00f3 h\u1ee9ng n\u00ean mu\u1ed1n vi\u1ebft m\u1ed9t b\u00e0i chia s\u1ebb v\u1ec1 c\u00e1c c\u00f4ng ngh\u1ec7 \u0111ang \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u1edf ph\u00eda front-end c\u1ee7a <a href=\"https:\/\/egany.com\">EGANY<\/a>.<\/p>\n<blockquote>\n<p>B\u00e0i vi\u1ebft kh\u00f4ng c\u00f3 \u00fd \u0111\u1ecbnh khen ho\u1eb7c ch\u00ea c\u00e1c th\u01b0 vi\u1ec7n\/framework \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp. \u0110\u00e2y \u0111\u01a1n thu\u1ea7n l\u00e0 \u0111\u00e1nh gi\u00e1 ch\u1ee7 quan c\u1ee7a m\u00ecnh v\u1ec1 m\u1ee9c \u0111\u1ed9 PH\u00d9 H\u1ee2P c\u1ee7a c\u00f4ng ngh\u1ec7 khi \u00e1p d\u1ee5ng t\u1ea1i EGANY.<\/p>\n<p><strong>C\u1eadp nh\u1eadt ng\u00e0y 04\/04\/2022:<\/strong> B\u1ed5 sung ChakraUI &amp; React Hook Form, Valtio<\/p>\n<\/blockquote>\n<h2>Tech Stack l\u00e0 g\u00ec?<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/think-meme-300x248.jpg\" alt=\"Thinking meme\" title=\"Thinking meme\" \/><\/p>\n<p>Ch\u1eafc h\u1eb3n c\u00e1c b\u1ea1n \u0111\u00e3 t\u1eebng nghe t\u1edbi <em>MEAN<\/em> stack (MongoDB, Express, Angular, Node), ho\u1eb7c <em>MERN<\/em> stack (MongoDB, Express, React, Node). \u0110\u00f3 l\u00e0 2 v\u00ed d\u1ee5 trong s\u1ed1 nhi\u1ec1u tech stack ph\u1ed5 bi\u1ebfn hi\u1ec7n nay.<\/p>\n<p>M\u1ed9t s\u1ed1 b\u1ea1n c\u00f3 th\u1ec3 th\u1eafc m\u1eafc t\u1ea1i sao <em>JAMstack<\/em> (JavaScript, API, Markup) kh\u00e1 n\u1ed5i d\u1ea1o g\u1ea7n \u0111\u00e2y l\u1ea1i kh\u00f4ng \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp ph\u1ea3i kh\u00f4ng? <em>JAMstack<\/em> tuy c\u00f3 <code>stack<\/code> trong t\u00ean g\u1ecdi c\u1ee7a m\u00ecnh nh\u01b0ng th\u1ef1c t\u1ebf n\u00f3 l\u00e0 m\u1ed9t ki\u1ebfn tr\u00fac d\u00f9ng \u0111\u1ec3 ph\u00e1t tri\u1ec3n website. <em>JAMstack<\/em> mang \u00fd ngh\u0129a r\u1ed9ng h\u01a1n so v\u1edbi <em>tech stack<\/em>. V\u1eady <em>tech stack<\/em> l\u00e0 g\u00ec?<\/p>\n<p><strong>Tech stack<\/strong> l\u00e0 t\u1ed5ng h\u1ee3p c\u00f4ng ngh\u1ec7 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e2y d\u1ef1ng v\u00e0 ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng. <strong>Tech stack<\/strong> th\u01b0\u1eddng s\u1ebd bao g\u1ed3m:<\/p>\n<ul>\n<li><strong>Programming languages:<\/strong> C#, Java, JavaScript, Ruby, &#8230;<\/li>\n<li><strong>Frameworks:<\/strong> .NET, Spring, Express, Ruby on Rails, &#8230;<\/li>\n<li><strong>Databases:<\/strong> MySQL, Postgre, MongoDB, &#8230;<\/li>\n<li><strong>Front-end tools:<\/strong> npm, Babel, Webpack, &#8230;<\/li>\n<li><strong>Back-end tools:<\/strong> Apache, Ngnix, Docker, &#8230;<\/li>\n<li><strong>Applications connected via APIs<\/strong>: API n\u1ed9i b\u1ed9 ho\u1eb7c c\u1ee7a m\u1ed9t b\u00ean th\u1ee9 ba (third-party)<\/li>\n<\/ul>\n<p>Nh\u01b0 ti\u00eau \u0111\u1ec1, b\u00e0i vi\u1ebft n\u00e0y ch\u1ec9 gi\u1edbi thi\u1ec7u v\u1ec1 front-end stack t\u1ea1i EGANY.<\/p>\n<h2>C\u00f4ng ngh\u1ec7 front-end t\u1ea1i EGANY<\/h2>\n<p>Sau h\u01a1n 2 n\u0103m t\u00ecm hi\u1ec3u v\u00e0 th\u1eed nghi\u1ec7m th\u00ec \u0111\u00e2y l\u00e0 c\u00e1c c\u00f4ng ngh\u1ec7 ch\u00ednh \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng t\u1ea1i EGANY:<\/p>\n<h3>1. JavaScript<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/javascript-thumb-150x150.jpg\" alt=\"JavaScript logo\" title=\"JavaScript logo\" \/><\/p>\n<p>Do h\u1ea7u h\u1ebft s\u1ea3n ph\u1ea9m t\u1ea1i EGANY \u0111\u1ec1u l\u00e0 web application (\u1ee9ng d\u1ee5ng ch\u1ea1y tr\u00ean n\u1ec1n t\u1ea3ng web) n\u00ean <a href=\"https:\/\/javascript.info\" rel=\"nofollow noopener\" target=\"_blank\"><strong>JavaScript<\/strong><\/a> lu\u00f4n l\u00e0 l\u1ef1a ch\u1ecdn h\u00e0ng \u0111\u1ea7u cho programming language.<\/p>\n<p><strong>\u01afu \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>D\u1ec5 ti\u1ebfp c\u1eadn. D\u1ec5 d\u00f9ng. D\u1ec5 ch\u1ea1y<\/li>\n<li>C\u00f3 th\u1ec3 ch\u1ea1y \u0111\u01b0\u1ee3c \u1edf client-side (browser) v\u00e0 server-side<\/li>\n<li>Hi\u1ec7u n\u0103ng \u1ed5n<\/li>\n<\/ul>\n<p><strong>Khuy\u1ebft \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>H\u01a1i &quot;t\u1ef1 do&quot; n\u00ean s\u1ebd ph\u1ea3i c\u1ea9n th\u1eadn khi ph\u00e1t tri\u1ec3n<\/li>\n<li>\u0110\u00f4i l\u00fac s\u1ebd ch\u1ea1y kh\u00e1c nhau tr\u00ean c\u00e1c tr\u00ecnh duy\u1ec7t kh\u00e1c nhau ho\u1eb7c th\u1eadm ch\u00ed c\u00e1c phi\u00ean b\u1ea3n kh\u00e1c nhau c\u1ee7a c\u00f9ng m\u1ed9t tr\u00ecnh duy\u1ec7t<\/li>\n<li>C\u1ea7n setup th\u00eam c\u00e1c c\u00f4ng c\u1ee5 h\u1ed7 tr\u1ee3 (linter, bundler, &#8230;) m\u1edbi c\u00f3 th\u1ec3 &quot;t\u1ef1 tin&quot; v\u00e0 tho\u1ea3i m\u00e1i ph\u00e1t tri\u1ec3n s\u1ea3n ph\u1ea9m<\/li>\n<\/ul>\n<p>EGANY \u0111ang trong qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i m\u1ed9t s\u1ed1 s\u1ea3n ph\u1ea9m hi\u1ec7n c\u00f3 qua <a href=\"https:\/\/www.typescriptlang.org\/\" rel=\"nofollow noopener\" target=\"_blank\">TypeScript<\/a> (TS). TS s\u1ebd gi\u00fap team tr\u00e1nh \u0111a s\u1ed1 c\u00e1c l\u1ed7i syntax, l\u1ed7i runtime c\u0169ng nh\u01b0 h\u1ed7 tr\u1ee3 t\u1ed1t h\u01a1n khi ph\u00e1t tri\u1ec3n s\u1ea3n ph\u1ea9m.<\/p>\n<p>N\u1ebfu chuy\u1ec3n \u0111\u1ed5i th\u00e0nh c\u00f4ng ch\u1eafc ch\u1eafn m\u00ecnh s\u1ebd c\u00f3 b\u00e0i vi\u1ebft <del>khoe<\/del> chia s\u1ebb cho c\u00e1c b\u1ea1n ???? H\u00e3y \u0111\u00f3n ch\u1edd nh\u00e9!<\/p>\n<h3>2. React<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/react-thumb-150x150.jpg\" alt=\"React logo\" title=\"React logo\" \/><\/p>\n<p>C\u00f3 l\u1ebd <a href=\"https:\/\/reactjs.org\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>React<\/strong><\/a> qu\u00e1 n\u1ed5i ti\u1ebfng \u0111\u1ec3 m\u00ecnh ph\u1ea3i gi\u1edbi thi\u1ec7u r\u1ed3i nh\u1ec9? N\u1ebfu ng\u01b0\u1eddi ng\u01b0\u1eddi nh\u00e0 nh\u00e0 \u0111\u1ec1u d\u00f9ng th\u00ec EGANY c\u0169ng kh\u00f4ng ph\u1ea3i l\u00e0 ngo\u1ea1i l\u1ec7.<\/p>\n<p><strong>\u01afu \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>Open Source<\/li>\n<li>Con \u00f4ng ch\u00e1u cha (Facebook)<\/li>\n<li>API \u1ed5n \u0111\u1ecbnh do ra \u0111\u1eddi t\u1eeb kh\u00e1 l\u00e2u<\/li>\n<li>C\u1ef1c k\u00ec nhi\u1ec1u th\u01b0 vi\u1ec7n c\u0169ng nh\u01b0 framework ph\u00e1t tri\u1ec3n d\u00e0nh cho\/d\u1ef1a tr\u00ean React<\/li>\n<\/ul>\n<p><strong>Khuy\u1ebft \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>Ph\u1ea3i setup c\u00f4ng c\u1ee5 h\u1ed7 tr\u1ee3 khi d\u00f9ng <em>JSX<\/em><\/li>\n<li>Kh\u00e1 r\u1eafc r\u1ed1i cho ng\u01b0\u1eddi m\u1edbi ti\u1ebfp c\u1eadn<\/li>\n<li>Ch\u1ec9 l\u00e0 th\u01b0 vi\u1ec7n UI n\u00ean s\u1ebd ph\u1ea3i c\u00e0i \u0111\u1eb7t th\u00eam c\u00e1c th\u01b0 vi\u1ec7n kh\u00e1c \u0111\u1ec3 h\u1ed7 tr\u1ee3 x\u00e2y d\u1ef1ng website ho\u00e0n ch\u1ec9nh<\/li>\n<\/ul>\n<h3>3. NextJS<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/next-thumb-150x150.jpg\" alt=\"NextJS logo\" title=\"NextJS logo\" \/><\/p>\n<p>V\u1edbi h\u1ec7 th\u1ed1ng &quot;\u0111\u1ed3 ch\u01a1i&quot; \u0111\u1ed3 s\u1ed9 v\u00e0 x\u1ecbn s\u00f2, <a href=\"https:\/\/nextjs.org\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>NextJS<\/strong><\/a> \u0111\u00e1p \u1ee9ng t\u1ed1t cho c\u00e1c d\u1ef1 \u00e1n x\u00e2y d\u1ef1ng website cho kh\u00e1ch h\u00e0ng c\u0169ng nh\u01b0 n\u1ed9i b\u1ed9 c\u00f4ng ty.<\/p>\n<p><strong>\u01afu \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>Open Source<\/li>\n<li>Con \u00f4ng ch\u00e1u cha (Vercel)<\/li>\n<li>S\u1eed d\u1ee5ng React<\/li>\n<li>Setup &amp; deploy d\u1ec5 d\u00e0ng nh\u1edd h\u1ec7 th\u1ed1ng <a href=\"https:\/\/vercel.com\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Vercel<\/strong><\/a><\/li>\n<li>Gi\u1ea3i quy\u1ebft t\u1ed1t t\u1ed1c \u0111\u1ed9 t\u1ea3i trang c\u0169ng nh\u01b0 <em>SEO<\/em> nh\u1edd <em>Server-Side Rendering<\/em><\/li>\n<li>R\u1ea5t nhi\u1ec1u template c\u00f3 s\u1eb5n, \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c h\u1ea7u h\u1ebft c\u00e1c y\u00eau c\u1ea7u th\u01b0\u1eddng g\u1eb7p c\u1ee7a kh\u00e1ch h\u00e0ng<\/li>\n<\/ul>\n<p><strong>Khuy\u1ebft \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>Gi\u1ea3i ph\u00e1p b\u1ecb ph\u1ee5 thu\u1ed9c v\u00e0o c\u00e1c r\u00e0ng bu\u1ed9c c\u1ee7a NextJS<\/li>\n<li>Kh\u00f3 t\u00edch h\u1ee3p c\u00e1c th\u01b0 vi\u1ec7n client-side c\u00f3 s\u1eed d\u1ee5ng object <code>window<\/code>, \u0111i\u1ec3n h\u00ecnh l\u00e0 c\u00e1c th\u01b0 vi\u1ec7n rich-text editor<\/li>\n<\/ul>\n<h3>4. VueJS<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/vue-thumb-150x150.jpg\" alt=\"VueJS logo\" title=\"VueJS logo\" \/><\/p>\n<p>UI framework n\u1ed5i \u0111\u00ecnh n\u1ed5i \u0111\u00e1m ngay t\u1eeb l\u00fac ra m\u1eaft. <a href=\"https:\/\/vuejs.org\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>VueJS<\/strong><\/a> c\u0169ng \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng cho m\u1ed9t s\u1ed1 s\u1ea3n ph\u1ea9m t\u1ea1i EGANY.<\/p>\n<p><strong>\u01afu \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>Open Source<\/li>\n<li>\u0110\u01b0\u1ee3c \u0111\u00e1nh gi\u00e1 l\u00e0 nh\u1eb9 &amp; nhanh h\u01a1n React<\/li>\n<li>\u0110\u1ea7y \u0111\u1ee7 t\u00ednh n\u0103ng h\u01a1n React<\/li>\n<li>Th\u00edch h\u1ee3p trong vi\u1ec7c &quot;n\u00e2ng c\u1ea5p&quot; HTML c\u00f3 s\u1eb5n<\/li>\n<li>Template gi\u1ed1ng HTML thu\u1ea7n<\/li>\n<\/ul>\n<p><strong>Khuy\u1ebft \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>C\u00f2n kh\u00e1 m\u1edbi, ch\u01b0a c\u00f3 nhi\u1ec1u plugins nh\u01b0 React<\/li>\n<li>Syntax h\u01a1i r\u01b0\u1eddm r\u00e0, \u0111i\u1ec3n h\u00ecnh nh\u01b0 import component (import t\u1eeb file, khai b\u00e1o <code>component<\/code> r\u1ed3i m\u1edbi c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng b\u00ean trong <code>&lt;template&gt;&lt;\/template&gt;<\/code>). D\u1ef1 ki\u1ebfn v\u1ea5n \u0111\u1ec1 n\u00e0y s\u1ebd \u0111\u01b0\u1ee3c kh\u1eafc ph\u1ee5c \u1edf version 3<\/li>\n<\/ul>\n<h3>5. Svelte<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/svelte-thumb-150x150.jpg\" alt=\"Svelte logo\" title=\"Svelte logo\" \/><\/p>\n<p>Ph\u00e1t tri\u1ec3n theo h\u01b0\u1edbng <em>compiler<\/em>, k\u00edch th\u01b0\u1edbc file bundle c\u1ee7a <a href=\"https:\/\/svelte.dev\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Svelte<\/strong><\/a> kh\u00e1 &quot;khi\u00eam t\u1ed1n&quot; so v\u1edbi React hay VueJS. T\u1eadn d\u1ee5ng l\u1ee3i th\u1ebf n\u00e0y, EGANY \u00e1p d\u1ee5ng Svelte v\u00e0o c\u00e1c s\u1ea3n ph\u1ea9m t\u00edch h\u1ee3p (nh\u01b0 <a href=\"https:\/\/www.facebook.com\/388836827817823\/videos\/356930598991708\" title=\"egaShop\" rel=\"nofollow noopener\" target=\"_blank\">egaShop<\/a>) nh\u1eb1m \u0111\u1ea3m b\u1ea3o t\u1ed1c \u0111\u1ed9 t\u1ea3i trang c\u0169ng nh\u01b0 hi\u1ec7u n\u0103ng c\u1ee7a \u1ee9ng d\u1ee5ng khi \u0111\u01b0\u1ee3c nh\u00fang v\u00e0o trang c\u1ee7a kh\u00e1ch h\u00e0ng.<\/p>\n<p><strong>\u01afu \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>Open Source<\/li>\n<li>Bundle nh\u1ecf, t\u1ed1c \u0111\u1ed9 t\u1ea3i v\u00e0 ch\u1ea1y cao<\/li>\n<li>Template gi\u1ed1ng HTML thu\u1ea7n<\/li>\n<li>Tr\u1ea3i nghi\u1ec7m dev t\u1ed1t<\/li>\n<\/ul>\n<p><strong>Khuy\u1ebft \u0111i\u1ec3m:<\/strong><\/p>\n<ul>\n<li>C\u00f2n kh\u00e1 m\u1edbi, ch\u01b0a c\u00f3 nhi\u1ec1u plugins nh\u01b0 React ho\u1eb7c th\u1eadm ch\u00ed l\u00e0 VueJS<\/li>\n<li>Syntax kh\u00e1 m\u1edbi l\u1ea1 so v\u1edbi c\u00e1c th\u01b0 vi\u1ec7n ho\u1eb7c framework hi\u1ec7n c\u00f3 khi\u1ebfn developer b\u1ee1 ng\u1ee1 khi ti\u1ebfp c\u1eadn l\u1ea7n \u0111\u1ea7u<\/li>\n<li>Kh\u00f4ng c\u00f3 sponsor (nh\u00e0 t\u00e0i tr\u1ee3) \u0111\u1ee7 l\u1edbn \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o duy tr\u00ec \u0111\u01b0\u1ee3c d\u1ef1 \u00e1n<\/li>\n<\/ul>\n<blockquote>\n<p>M\u00ecnh c\u00f3 vi\u1ebft th\u00eam b\u00e0i <a href=\"https:\/\/egany.com\/blogs\/svelte-van-cuoc-thanh-cong\/\" title=\"Svelte - V\u00e1n c\u01b0\u1ee3c th\u00e0nh c\u00f4ng\">Svelte &#8211; V\u00e1n c\u01b0\u1ee3c th\u00e0nh c\u00f4ng<\/a>, m\u1ecdi ng\u01b0\u1eddi c\u00f3 th\u1ec3 \u0111\u1ecdc th\u00eam c\u00e2u chuy\u1ec7n khi l\u1ef1a ch\u1ecdn Svelte c\u1ee7a team m\u00ecnh.<\/p>\n<\/blockquote>\n<h3>6. C\u00e1c th\u01b0 vi\u1ec7n h\u1ed7 tr\u1ee3<\/h3>\n<p>Ngo\u00e0i c\u00e1c c\u00f4ng ngh\u1ec7 tr\u00ean th\u00ec EGANY c\u00f2n s\u1eed d\u1ee5ng th\u00eam m\u1ed9t s\u1ed1 th\u01b0 vi\u1ec7n h\u1ed7 tr\u1ee3 \u0111\u1ec3 \u0111\u1ea9y nhanh t\u1ed1c \u0111\u1ed9 ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng.<\/p>\n<p style=\"display:flex;\">\n    <img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/zustand-thumb-150x150.jpg\" alt=\"Zustand logo\" title=\"Zustand logo\"><br \/>\n    <img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/immer-thumb-150x150.jpg\" alt=\"Immer logo\" title=\"Immer logo\">\n<\/p>\n<p><a href=\"https:\/\/zustand.surge.sh\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Zustand<\/strong><\/a> v\u00e0 <a href=\"https:\/\/immerjs.github.io\/immer\/docs\/introduction\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Immer<\/strong><\/a> l\u00e0 b\u1ed9 \u0111\u00f4i k\u1ebft h\u1ee3p gi\u00fap vi\u1ec7c qu\u1ea3n l\u00fd <em>client-site state<\/em> tr\u1edf n\u00ean d\u1ec5 d\u00e0ng v\u00e0 hi\u1ec7u qu\u1ea3 h\u01a1n khi l\u00e0m vi\u1ec7c v\u1edbi NextJS.<\/p>\n<p style=\"display:flex;\">\n    <img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/react-query-thumb-150x150.jpg\" alt=\"React Query logo\" title=\"React Query logo\"><br \/>\n    <img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/swr-thumb-150x150.jpg\" alt=\"SWR logo\" title=\"SWR logo\">\n<\/p>\n<p>\u0110\u1ed1i v\u1edbi <em>server-site state<\/em> th\u00ec <a href=\"https:\/\/react-query.tanstack.com\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>React Query<\/strong><\/a> v\u00e0 <a href=\"https:\/\/swr.vercel.app\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>SWR<\/strong><\/a> \u0111\u1ec1u \u0111\u00e1p \u1ee9ng t\u1ed1t cho nhu c\u1ea7u hi\u1ec7n t\u1ea1i c\u1ee7a team. Tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng c\u0169ng \u0111\u01b0\u1ee3c n\u00e2ng cao nh\u1edd t\u00ednh n\u0103ng t\u1ef1 c\u1eadp nh\u1eadt l\u1ea1i d\u1eef li\u1ec7u khi focus l\u1ea1i website.<\/p>\n<p style=\"display:flex;\">\n    <img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/tailwind-thumb-150x150.jpg\" alt=\"TailwindCSS logo\" title=\"TailwindCSS logo\"><br \/>\n    <img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/tachyons-thumb-150x150.jpg\" alt=\"Tachyons logo\" title=\"Tachyons logo\">\n<\/p>\n<p><a href=\"https:\/\/tailwindcss.com\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Tailwind<\/strong><\/a> &amp; <a href=\"https:\/\/tachyons.io\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Tachyons<\/strong><\/a> tuy kh\u00f4ng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng nhi\u1ec1u trong c\u00e1c s\u1ea3n ph\u1ea9m hi\u1ec7n c\u00f3 tuy nhi\u00ean ch\u00fang l\u1ea1i \u0111\u00f3ng vai tr\u00f2 ch\u1ee7 ch\u1ed1t trong qu\u00e1 tr\u00ecnh t\u1ea1o MVP (Minimum Viable Product, kh\u00f4ng ph\u1ea3i Most Valuable Player \u0111\u00e2u nh\u00e9 c\u00e1c b\u1ea1n game th\u1ee7 ????) ho\u1eb7c UI mockup.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/antd-thumb-150x150.jpg\" alt=\"Ant Design logo\" title=\"Ant Design logo\" \/><\/p>\n<p>Nh\u1eadn ra vi\u1ec7c qu\u1ea3n l\u00fd custom UI components ng\u00e0y c\u00e0ng tr\u1edf n\u00ean kh\u00f3 kh\u0103n v\u00e0 m\u1ea5t th\u1eddi gian h\u01a1n, team quy\u1ebft \u0111\u1ecbnh l\u1ef1a ch\u1ecdn <a href=\"https:\/\/ant.design\/\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Ant Design<\/strong><\/a>. \u0110i\u1ec1u n\u00e0y gi\u00fap team t\u1eadp trung v\u00e0o c\u00e1c t\u00ednh n\u0103ng c\u1ee7a s\u1ea3n ph\u1ea9m h\u01a1n l\u00e0 nh\u1eefng th\u1ee9 &quot;r\u00e2u ria&quot; li\u00ean quan t\u1edbi giao di\u1ec7n.<\/p>\n<h2>Tech stack<\/h2>\n<h3>1. User Dashboard | Admin Dashboard | Website<\/h3>\n<p>H\u1ec7 th\u1ed1ng c\u0169:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/dashboard-stack.jpg\" alt=\"Front-end dashboard tech stack\" title=\"Front-end dashboard tech stack\" \/><\/p>\n<ul>\n<li><strong>Programming Language:<\/strong> JavaScript &amp; TypeScript (main)<\/li>\n<li><strong>Framework:<\/strong> NextJS<\/li>\n<li><strong>UI<\/strong>: React + Ant Design<\/li>\n<li><strong>State management:<\/strong> Zustand + Immer + React Query<\/li>\n<\/ul>\n<p>H\u1ec7 th\u1ed1ng m\u1edbi (t\u1eeb 28\/10\/2021):<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2022\/02\/chakraui-logo-150x150.png\" alt=\"Chakra UI\" \/> <img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2022\/02\/react-hook-form-logo-150x150.png\" alt=\"React Hook Form\" \/> <img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/valtio-150x150.png\" alt=\"Valtio\" \/><\/p>\n<p>V\u00ec nhu c\u1ea7u custom theme \u0111\u1ec3 c\u00f3 &quot;ch\u1ea5t ri\u00eang&quot; c\u1ee7a EGANY, Ant Design \u0111\u00e3 \u0111\u01b0\u1ee3c thay th\u1ebf b\u1edfi ChakraUI v\u00e0 React Hook Form. Zustand + Immer \u0111\u01b0\u1ee3c thay th\u1ebf b\u1eb1ng Valtio &#8211; \u0111\u01a1n gi\u1ea3n, d\u1ec5 d\u00f9ng nh\u01b0ng v\u1eabn \u0111\u1ea3m b\u1ea3o c\u00e1c t\u00ednh n\u0103ng c\u1ee7a b\u1ed9 \u0111\u00f4i tr\u01b0\u1edbc \u0111\u00f3.<\/p>\n<ul>\n<li><strong>Programming Language:<\/strong> TypeScript<\/li>\n<li><strong>Framework:<\/strong> NextJS<\/li>\n<li><strong>UI<\/strong>: React + ChakraUI + React Hook Form<\/li>\n<li><strong>State management:<\/strong> Valtio + React Query<\/li>\n<\/ul>\n<h3>2. Theme | Theme Addons<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/theme-stack.jpg\" alt=\"Front-end theme tech stack\" title=\"Front-end theme tech stack\" \/><\/p>\n<ul>\n<li><strong>Programming Language:<\/strong> JavaScript<\/li>\n<li><strong>Framework:<\/strong> VueJS<\/li>\n<li><strong>CSS<\/strong>: Tailwind, Tachyons ho\u1eb7c SCSS<\/li>\n<\/ul>\n<h3>3. Embedded Web App<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/theme-stack.jpg\" alt=\"Front-end embedded app tech stack\" title=\"Front-end embedded app tech stack\" \/><\/p>\n<ul>\n<li><strong>Programming Language:<\/strong> JavaScript<\/li>\n<li><strong>Framework:<\/strong> Svelte<\/li>\n<li><strong>CSS<\/strong>: Tailwind, Tachyons ho\u1eb7c CSS<\/li>\n<\/ul>\n<h2>T\u1ed5ng k\u1ebft<\/h2>\n<p>Tu\u1ed5i gi\u00e0 s\u1ee9c y\u1ebfu ch\u1ec9 vi\u1ebft \u0111\u01b0\u1ee3c t\u1edbi \u0111\u00e2y th\u00f4i. Mong r\u1eb1ng qua b\u00e0i vi\u1ebft c\u00e1c b\u1ea1n s\u1ebd l\u1ef1a ch\u1ecdn \u0111\u01b0\u1ee3c cho b\u1ea3n th\u00e2n m\u00ecnh c\u0169ng nh\u01b0 team m\u1ed9t tech stack ph\u00f9 h\u1ee3p nh\u1ea5t.<\/p>\n<p>Tech stack y\u00eau th\u00edch c\u1ee7a b\u1ea1n ho\u1eb7c team b\u1ea1n l\u00e0 g\u00ec? H\u00e3y chia s\u1ebb cho m\u00ecnh v\u00e0 m\u1ecdi ng\u01b0\u1eddi bi\u1ebft nh\u00e9!<\/p>\n<p>C\u00e1m \u01a1n c\u00e1c b\u1ea1n \u0111\u00e3 \u0111\u1ecdc. Happy hacking!<\/p>\n<blockquote>\n<p>Sau b\u00e0i c\u1ee7a m\u00ecnh th\u00ec b\u1ea1n Thu\u1eadn \u0111\u00e3 bi\u00ean ti\u1ebfp b\u00e0i <a href=\"https:\/\/egany.com\/blogs\/egany-back-end-tech-stack\/\" title=\"Back-end Tech Stack\">Back-end Tech Stack<\/a> lu\u00f4n, c\u00e1c b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ecdc ngay cho n\u00f3ng ;).<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>L\u1eddi m\u1edf \u0111\u1ea7u Sau chu\u1ed7i b\u00e0i V\u1ecdc c\u00f9ng Th\u00e0nh kh\u00f4ng m\u1ea5y th\u00e0nh c\u00f4ng t\u1ea1i DevNow, c\u1ee9 ng\u1ee1 l\u00e0 s\u1ebd kh\u00f4ng vi\u1ebft blog n\u1eefa. Tuy nhi\u00ean, h\u00f4m nay c\u00f3 h\u1ee9ng n\u00ean mu\u1ed1n vi\u1ebft m\u1ed9t b\u00e0i chia s\u1ebb v\u1ec1 c\u00e1c c\u00f4ng ngh\u1ec7 \u0111ang \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u1edf ph\u00eda front-end c\u1ee7a EGANY. B\u00e0i vi\u1ebft kh\u00f4ng c\u00f3 \u00fd \u0111\u1ecbnh khen ho\u1eb7c ch\u00ea c\u00e1c th\u01b0 vi\u1ec7n\/framework \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp. \u0110\u00e2y \u0111\u01a1n thu\u1ea7n l\u00e0 \u0111\u00e1nh gi\u00e1 ch\u1ee7 quan c\u1ee7a m\u00ecnh v\u1ec1 m\u1ee9c \u0111\u1ed9 PH\u00d9 H\u1ee2P c\u1ee7a c\u00f4ng ngh\u1ec7 khi \u00e1p d\u1ee5ng t\u1ea1i EGANY. C\u1eadp nh\u1eadt ng\u00e0y 04\/04\/2022: B\u1ed5 sung ChakraUI &amp; React Hook Form, Valtio Tech<\/p>\n","protected":false},"author":2,"featured_media":366,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27],"tags":[41,137,29,39,31,32,162,35,34,38,36,30,37,161,33,40],"_links":{"self":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/335"}],"collection":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/comments?post=335"}],"version-history":[{"count":0,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/335\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media\/366"}],"wp:attachment":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media?parent=335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/categories?post=335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/tags?post=335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}