{"id":889,"date":"2021-07-17T08:58:13","date_gmt":"2021-07-17T08:58:13","guid":{"rendered":"https:\/\/egany.com\/blogs\/?p=889"},"modified":"2021-09-08T08:19:50","modified_gmt":"2021-09-08T08:19:50","slug":"frontend-du-ky-s1e1-egany-apps-phan-1-van-su-khoi-dau-nan","status":"publish","type":"post","link":"https:\/\/egany.com\/blogs\/frontend-du-ky-s1e1-egany-apps-phan-1-van-su-khoi-dau-nan\/","title":{"rendered":"Frontend Du K\u00fd S1E1 | EGANY Apps (ph\u1ea7n 1): V\u1ea1n s\u1ef1 kh\u1edfi \u0111\u1ea7u nan"},"content":{"rendered":"<h2>L\u1eddi m\u1edf \u0111\u1ea7u<\/h2>\n<p>T\u00ecnh c\u1edd \u0111\u1ecdc b\u00e0i vi\u1ebft <a href=\"https:\/\/blog.daftcode.pl\/hype-driven-development-3469fc2e9b22\" rel=\"nofollow noopener\" target=\"_blank\">Hype Driven Development<\/a> l\u00e0m m\u00ecnh nh\u1edb l\u1ea1i h\u1ed3i m\u1edbi b\u1eaft \u0111\u1ea7u v\u00e0o ngh\u1ec1, ch\u1ea1y theo c\u00f4ng ngh\u1ec7 m\u1edbi m\u1ed9t c\u00e1ch m\u00f9 qu\u00e1ng \u0111\u1ec3 r\u1ed3i ph\u1ea3i tr\u1ea3 gi\u00e1 \u0111\u1eaft b\u1eb1ng nh\u1eefng \u0111\u1ee3t refactor\/migrate k\u00e9o d\u00e0i h\u00e0ng tu\u1ea7n, th\u1eadm ch\u00ed l\u00e0 h\u00e0ng th\u00e1ng tr\u1eddi.<\/p>\n<p>Tuy l\u00e0 nh\u1eefng tr\u1ea3i nghi\u1ec7m kh\u00f4ng vui nh\u01b0ng \u0111\u00f3 \u0111\u1ec1u l\u00e0 nh\u1eefng b\u00e0i h\u1ecdc \u0111\u1eaft gi\u00e1 team EGANY c\u00f3 \u0111\u01b0\u1ee3c trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n s\u1ea3n ph\u1ea9m. C\u0169ng nh\u00e2n c\u01a1 h\u1ed9i n\u00e0y, m\u00ecnh quy\u1ebft \u0111\u1ecbnh &quot;ra m\u1eaft&quot; chu\u1ed7i b\u00e0i vi\u1ebft k\u1ec3 v\u1ec1 qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n c\u1ee7a nh\u1eefng d\u1ef1 \u00e1n frontend t\u1ea1i EGANY d\u01b0\u1edbi g\u00f3c nh\u00ecn c\u1ee7a <em>#1 Bug Contributor<\/em> l\u00e0 m\u00ecnh. T\u00ean chu\u1ed7i b\u00e0i vi\u1ebft l\u00e0 <strong>Frontend Du K\u00fd<\/strong>.<\/p>\n<p>M\u00ecnh s\u1ebd chia m\u1ed7i d\u1ef1 \u00e1n s\u1ebd l\u00e0 m\u1ed9t season (m\u00f9a, k\u00ed hi\u1ec7u l\u00e0 S) bao g\u1ed3m nhi\u1ec1u t\u1eadp kh\u00e1c nhau (episode, k\u00ed hi\u1ec7u l\u00e0 E). V\u00ed d\u1ee5: S1E1 s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3u l\u00e0 m\u00f9a 1, t\u1eadp 1. Hi v\u1ecdng chu\u1ed7i b\u00e0i vi\u1ebft s\u1ebd \u0111\u01b0\u1ee3c s\u1ef1 \u0111\u00f3n nh\u1eadn n\u1ed3ng nhi\u1ec7t t\u1eeb c\u00e1c b\u1ea1n.<\/p>\n<p>M\u00ecnh s\u1ebd b\u1eaft \u0111\u1ea7u m\u00f9a \u0111\u1ea7u ti\u00ean v\u1edbi <a href=\"https:\/\/apps.egany.com\">EGANY Apps<\/a>, m\u1ed9t trong nh\u1eefng s\u1ea3n ph\u1ea9m \u0111\u1ea7u ti\u00ean m\u00ecnh tham gia t\u1ea1i <a href=\"https:\/\/egany.com\">EGANY<\/a>.<\/p>\n<h2>Gi\u1edbi thi\u1ec7u<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/egany-apps-sign-in-screen-1024x494.png\" alt=\"egany-apps-sign-in-screen\" \/><\/p>\n<p><a href=\"https:\/\/apps.egany.com\"><strong>EGANY Apps<\/strong><\/a> l\u00e0 d\u1ef1 \u00e1n dashboard cho ph\u00e9p ng\u01b0\u1eddi d\u00f9ng c\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t, n\u00e2ng c\u1ea5p c\u0169ng nh\u01b0 thi\u1ebft l\u1eadp h\u1ea7u h\u1ebft c\u00e1c \u1ee9ng d\u1ee5ng m\u00e0 EGANY cung c\u1ea5p tr\u00ean c\u00e1c n\u1ec1n t\u1ea3ng th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed (Haravan\/Sapo).<\/p>\n<p>L\u00fac d\u1ef1 \u00e1n ra \u0111\u1eddi th\u00ec m\u00ecnh ch\u01b0a v\u00e0o c\u00f4ng ty. D\u1ef1a v\u00e0o th\u00f4ng tin t\u1eeb git c\u0169ng nh\u01b0 c\u00e1c t\u00e0i li\u1ec7u \u0111i k\u00e8m th\u00ec tech stack kh\u1edfi \u0111i\u1ec3m l\u00fac b\u1ea5y gi\u1edd l\u00e0 b\u1ed9 <a href=\"https:\/\/expressjs.com\/en\/starter\/generator.html\" rel=\"nofollow noopener\" target=\"_blank\"><code>express application generator<\/code><\/a> m\u1eb7c \u0111\u1ecbnh: Express, Pug (HTML), Bootstrap Keen Themes (CSS) v\u00e0 JS.<\/p>\n<p>Do l\u00fac b\u1ea5y gi\u1edd ch\u1ec9 c\u00f3 2 s\u1ea3n ph\u1ea9m tr\u00ean s\u00e0n \u0111i\u1ec7n t\u1eed n\u00ean team v\u1eabn gi\u1eef nguy\u00ean ki\u1ebfn tr\u00fac monolithic (g\u1ed9p chung frontend v\u00e0 backend). Tuy nhi\u00ean, sau m\u1ed9t th\u1eddi gian th\u1ef1c hi\u1ec7n th\u00ec team quy\u1ebft \u0111\u1ecbnh t\u00e1ch bi\u1ec7t frontend v\u00e0 backend \u0111\u1ec3 c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng ph\u00e1t tri\u1ec3n c\u0169ng nh\u01b0 gi\u1ea3m thi\u1ec3u t\u1ec9 l\u1ec7 &quot;ch\u1ebft c\u00f9ng l\u00fac&quot; c\u1ee7a h\u1ec7 th\u1ed1ng.<br \/>\n\u0110\u00e2y l\u00e0 th\u1eddi \u0111i\u1ec3m m\u00ecnh gia nh\u1eadp c\u00f4ng ty v\u00e0 c\u0169ng l\u00e0 kh\u1edfi \u0111\u1ea7u c\u1ee7a nh\u1eefng chu\u1ed7i ng\u00e0y \u0111au \u0111\u1ea7u c\u1ee7a team.<\/p>\n<h2>L\u1ef1a ch\u1ecdn tech stack<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/02\/front-end-stack-banner-700x333.jpg\" alt=\"EGANY Front-end Tech Stack\" \/><\/p>\n<p>\u0110\u1ec3 \u0111\u1ea3m b\u1ea3o qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i \u0111\u01b0\u1ee3c su\u00f4n s\u1ebb, team \u0111\u1ec1 ra m\u1ed9t s\u1ed1 y\u00eau c\u1ea7u cho th\u01b0 vi\u1ec7n\/framework nh\u01b0 sau:<\/p>\n<ul>\n<li>Hi\u1ec7u n\u0103ng t\u1ed1t v\u00e0 \u1ed5n \u0111\u1ecbnh<\/li>\n<li>H\u1ed7 tr\u1ee3 SEO<\/li>\n<li>H\u1ed7 tr\u1ee3 style b\u1eb1ng CSS ho\u1eb7c SCSS c\u00e0ng t\u1ed1t<\/li>\n<li>D\u1ec5 code<\/li>\n<\/ul>\n<p>M\u1ed9t s\u1ed1 th\u01b0 vi\u1ec7n\/framework \u0111\u00e1ng c\u00e2n nh\u1eafc bao g\u1ed3m:<\/p>\n<ul>\n<li><a href=\"https:\/\/create-react-app.dev\/\" rel=\"nofollow noopener\" target=\"_blank\">Create React App<\/a><\/li>\n<li><a href=\"https:\/\/www.gatsbyjs.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Gatsby<\/a><\/li>\n<li><a href=\"https:\/\/www.reactboilerplate.com\/\" rel=\"nofollow noopener\" target=\"_blank\">React Boilerplate<\/a><\/li>\n<li><a href=\"https:\/\/nextjs.org\/\" rel=\"nofollow noopener\" target=\"_blank\">Next.js<\/a>\/<a href=\"https:\/\/nuxtjs.org\/\" rel=\"nofollow noopener\" target=\"_blank\">NuxtJs<\/a><\/li>\n<\/ul>\n<h3>Create React App (CRA)<\/h3>\n<p>CRA c\u00f3 l\u1ebd \u0111\u00e3 qu\u00e1 quen thu\u1ed9c v\u1edbi team v\u00e0 \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c h\u1ea7u h\u1ebft c\u00e1c y\u00eau c\u1ea7u \u0111\u01b0a ra. Tuy nhi\u00ean, m\u1ed9t s\u1ed1 \u0111i\u1ec3m b\u1ea5t l\u1ee3i m\u00e0 CRA c\u00f3:<\/p>\n<ul>\n<li>Client-Side Rendering n\u1ebfu kh\u00f4ng bi\u1ebft c\u00e1ch optimize bundle s\u1ebd r\u1ea5t ch\u1eadm<\/li>\n<li>Ph\u1ea3i c\u00e0i th\u00eam <code>react-helmet<\/code> \u0111\u1ec3 h\u1ed7 tr\u1ee3 SEO v\u00e0 c\u0169ng kh\u00f4ng \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c cho t\u1ea5t c\u1ea3 search engine l\u00fac b\u1ea5y gi\u1edd<\/li>\n<li>Routing ph\u1ea3i t\u1ef1 setup<\/li>\n<li>B\u1eaft bu\u1ed9c eject n\u1ebfu mu\u1ed1n &quot;t\u1ef1 do&quot; ch\u1ec9nh s\u1eeda<\/li>\n<\/ul>\n<p>D\u00f9 v\u1eady, CRA v\u1eabn \u0111\u01b0\u1ee3c ch\u1ecdn l\u00e0m c\u00f4ng ngh\u1ec7 d\u1ef1 ph\u00f2ng trong tr\u01b0\u1eddng h\u1ee3p c\u00e1c th\u01b0 vi\u1ec7n\/framework kh\u00e1c kh\u00f4ng th\u1ec3 \u0111\u00e1p \u1ee9ng \u0111\u01af\u1ee3c.<\/p>\n<h3>Gatsby<\/h3>\n<p>Gatsby l\u00fac b\u1ea5y gi\u1edd c\u0169ng c\u00f2n kh\u00e1 m\u1edbi. T\u1ed1c \u0111\u1ed9 c\u1ee7a Static Site Generator th\u1eadt s\u1ef1 \u0111\u00e1ng g\u1eddm v\u00e0 g\u1ea7n nh\u01b0 th\u1ed1ng l\u0129nh th\u1ecb tr\u01b0\u1eddng trong giai \u0111o\u1ea1n \u0111\u1ea7u 2019 v\u1ec1 hi\u1ec7u n\u0103ng. T\u1ea5t nhi\u00ean, Gatsby v\u1eabn c\u00f3 \u0111i\u1ec3m y\u1ebfu c\u1ee7a ri\u00eang m\u00ecnh:<\/p>\n<ul>\n<li>GraphQL l\u00e0 m\u1ed9t c\u00f4ng ngh\u1ec7 t\u01b0\u01a1ng \u0111\u1ed1i l\u1ea1 l\u1eabm v\u1edbi team<\/li>\n<li>T\u00edch h\u1ee3p authentication kh\u00e1 ph\u1ee9c t\u1ea1p v\u00e0 kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi vi\u1ec7c l\u00e0m dashboard (theo g\u00f3c nh\u00ecn c\u1ee7a m\u00ecnh l\u00fac \u0111\u00f3)<\/li>\n<li>T\u00e0i li\u1ec7u ch\u01b0a t\u1ed1t khi\u1ebfn vi\u1ec7c ti\u1ebfp c\u1eadn g\u1eb7p nhi\u1ec1u kh\u00f3 kh\u0103n<\/li>\n<li>C\u00f4ng ngh\u1ec7 c\u00f2n kh\u00e1 tr\u1ebb, r\u1ee7i ro cao n\u1ebfu \u00e1p d\u1ee5ng v\u00e0o production<\/li>\n<\/ul>\n<h3>React Boilerplate (RB)<\/h3>\n<p>C\u0169ng nh\u01b0 CRA, RB c\u0169ng l\u00e0 m\u1ed9t d\u1ea1ng boilerplate (t\u1ea1m d\u1ecbch l\u00e0 s\u01b0\u1eddn d\u1ef1 \u00e1n) nh\u01b0ng RB \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u1eb5n nhi\u1ec1u c\u00f4ng ngh\u1ec7 c\u1ea7n thi\u1ebft h\u01a1n cho d\u1ef1 \u00e1n th\u1ef1c t\u1ebf, v\u00ed d\u1ee5: <code>react-router<\/code>, <code>redux<\/code>, <code>redux-saga<\/code>, <code>react-helmet<\/code>, <code>jest<\/code>, <code>eslint<\/code>, &#8230; c\u00f9ng nhi\u1ec1u t\u1ed1i \u01b0u kh\u00e1c. Ch\u00ednh vi\u1ec7c t\u00edch h\u1ee3p n\u00e0y c\u0169ng l\u00e0 \u0111i\u1ec3m tr\u1eeb l\u1edbn c\u1ee7a RB. Team b\u1ecb &quot;ng\u1ee3p&quot; khi ph\u1ea3i ti\u1ebfp c\u1eadn qu\u00e1 nhi\u1ec1u c\u00f4ng ngh\u1ec7 m\u1edbi v\u00e0 \u0111i\u1ec1u n\u00e0y l\u00e0m ch\u1eadm qu\u00e1 tr\u00ecnh chuy\u1ec3n \u0111\u1ed5i t\u1eeb d\u1ef1 \u00e1n c\u0169.<\/p>\n<p>V\u1eady nh\u01b0ng n\u00f3i \u0111i c\u0169ng ph\u1ea3i n\u00f3i l\u1ea1i, n\u1ebfu team c\u1ea7n h\u1ea7u h\u1ebft c\u00e1c t\u00ednh n\u0103ng m\u00e0 RB cung c\u1ea5p v\u00e0 c\u00f3 \u0111\u1ee7 th\u1eddi gian \u0111\u1ec3 t\u00ecm hi\u1ec3u c\u00f4ng ngh\u1ec7 th\u00ec RB kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t l\u1ef1a ch\u1ecdn t\u1ed3i \u0111\u1ec3 ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng.<\/p>\n<h3>Next.js \/ NuxtJS<\/h3>\n<p>Do 2 framework t\u01b0\u01a1ng \u0111\u1ed1i gi\u1ed1ng nhau n\u00ean m\u00ecnh gom chung v\u1ec1 m\u1ed9t. Nh\u00ecn chung th\u00ec c\u1ea3 2 \u0111\u1ec1u \u0111\u00e1p \u1ee9ng t\u1ed1t t\u1ea5t c\u1ea3 c\u00e1c y\u00eau c\u1ea7u team \u0111\u01b0a ra. \u0110i\u1ec3m kh\u00e1c bi\u1ec7t duy nh\u1ea5t l\u00e0 th\u01b0 vi\u1ec7n frontend b\u00ean d\u01b0\u1edbi. Next.js s\u1eed d\u1ee5ng React, m\u1ed9t th\u01b0 vi\u1ec7n t\u01b0\u01a1ng \u0111\u1ed1i l\u00e2u \u0111\u1eddi v\u00e0 c\u00f3 c\u1ed9ng \u0111\u1ed3ng developer l\u1edbn. Ng\u01b0\u1ee3c l\u1ea1i, NuxtJS s\u1eed d\u1ee5ng Vue, m\u1ed9t th\u01b0 vi\u1ec7n c\u00f2n kh\u00e1 tr\u1ebb v\u00e0 ch\u01b0a \u0111\u01b0\u1ee3c nhi\u1ec1u c\u00f4ng ty s\u1eed d\u1ee5ng trong production. H\u01a1n n\u1eefa, do team c\u0169ng thi\u00ean v\u1ec1 React h\u01a1n n\u00ean NuxtJS b\u1ecb &quot;b\u1ecf qua&quot; v\u00e0 Next.js tr\u1edf th\u00e0nh c\u00f4ng ngh\u1ec7 \u0111\u01b0\u1ee3c ch\u1ecdn.<\/p>\n<p>Ngo\u00e0i vi\u1ec7c \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c c\u00e1c y\u00eau c\u1ea7u team \u0111\u1eb7t ra \u1edf tr\u00ean, Next.js c\u00f2n c\u00f3 c\u00e1c \u0111i\u1ec3m m\u1ea1nh nh\u01b0:<\/p>\n<ul>\n<li>Cho ph\u00e9p custom nhi\u1ec1u v\u00e0 s\u00e2u<\/li>\n<li>T\u00e0i li\u1ec7u ho\u00e0n ch\u1ec9nh, r\u00f5 r\u00e0ng<\/li>\n<li>D\u1ec5 ti\u1ebfp c\u1eadn n\u1ebfu \u0111\u00e3 c\u00f3 n\u1ec1n t\u1ea3ng React<\/li>\n<\/ul>\n<p>Do ki\u1ec3u g\u00ec c\u0169ng ph\u1ea3i code l\u1ea1i to\u00e0n b\u1ed9 (do code c\u0169 s\u1eed d\u1ee5ng Pug + bootstrap) n\u00ean team quy\u1ebft \u0111\u1ecbnh s\u1ebd d\u1ef1ng b\u1ed9 component ri\u00eang b\u1eb1ng b\u1ed9 CSS &quot;homemade&quot; (nh\u00e0 l\u00e0m) c\u00f3 s\u1eb5n trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n c\u00e1c s\u1ea3n ph\u1ea9m kh\u00e1c. M\u1ed9t c\u00f4ng \u0111\u00f4i vi\u1ec7c ph\u1ea3i kh\u00f4ng n\u00e0o?<\/p>\n<h2>B\u1eaft \u0111\u1ea7u thay \u0111\u1ed5i<\/h2>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/start-from-scratch-600x450.png\" alt=\"start-from-scratch\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/2797795-Start-from-Scratch-Illustration\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/2797795-Start-from-Scratch-Illustration<\/a><\/p>\n<\/blockquote>\n<p>Sau khi l\u1ef1a ch\u1ecdn \u0111\u01b0\u1ee3c c\u00f4ng ngh\u1ec7 s\u1ebd s\u1eed d\u1ee5ng, team s\u1ebd ng\u1ed3i l\u1ea1i v\u00e0 c\u00f9ng nhau th\u1ea3o lu\u1eadn v\u1ec1 c\u00e1c quy tr\u00ecnh ph\u00e1t tri\u1ec3n d\u1ef1 \u00e1n \u0111\u1ec3 \u0111\u1ea1t hi\u1ec7u qu\u1ea3 cao nh\u1ea5t. L\u00fd do t\u1ea1i sao l\u1ea1i c\u00f3 bu\u1ed5i th\u1ea3o lu\u1eadn n\u00e0y? M\u1ed9t s\u1ed1 l\u00fd do ch\u00ednh bao g\u1ed3m:<\/p>\n<ul>\n<li><strong>D\u1ef1 \u00e1n c\u00f3 th\u1ec3 xem l\u1ea1i &quot;start from scratch&quot;, t\u1ee9c l\u00e0 l\u00e0m l\u1ea1i t\u1eeb \u0111\u1ea7u<\/strong>. \u0110\u00e2y l\u00e0 m\u1ed9t c\u01a1 h\u1ed9i t\u1ed1t \u0111\u1ec3 kh\u1eafc ph\u1ee5c nh\u1eefng thi\u1ebfu s\u00f3t c\u00f3 trong l\u1ea7n ph\u00e1t tri\u1ec3n tr\u01b0\u1edbc \u0111\u00f3.<\/li>\n<li><strong>Quy m\u00f4 d\u1ef1 \u00e1n l\u1edbn h\u01a1n tr\u01b0\u1edbc<\/strong>. V\u1edbi s\u1ef1 tham gia c\u1ee7a nhi\u1ec1u th\u00e0nh vi\u00ean h\u01a1n, \u0111\u1ed3ng th\u1eddi (s\u1ebd c\u00f3) nhi\u1ec1u t\u00ednh n\u0103ng h\u01a1n ch\u1eafc ch\u1eafn s\u1ebd t\u1ea1o ra nhi\u1ec1u s\u1ef1 thay \u0111\u1ed5i. C\u1ea7n c\u00f3 m\u1ed9t quy tr\u00ecnh ho\u1eb7c m\u1ed9t &quot;ti\u1ebfng n\u00f3i chung&quot; gi\u1eefa c\u00e1c th\u00e0nh vi\u00ean \u0111\u1ec3 m\u1ecdi thay \u0111\u1ed5i \u0111\u1ec1u th\u1ed1ng nh\u1ea5t v\u00e0 d\u1ec5 d\u00e0ng chuy\u1ec3n giao gi\u1eefa c\u00e1c th\u00e0nh vi\u00ean trong team.<\/li>\n<li><strong>Th\u1eed sai<\/strong>. L\u00e0 m\u1ed9t trong nh\u1eefng d\u1ef1 \u00e1n l\u1edbn \u0111\u1ea7u ti\u00ean trong c\u00f4ng ty, team c\u0169ng mu\u1ed1n th\u1eed nghi\u1ec7m v\u00e0 \u00e1p d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng ph\u00e1p m\u1edbi, c\u00e1c c\u00f4ng ngh\u1ec7 m\u1edbi \u0111\u1ec3 l\u00e0m n\u1ec1n t\u1ea3ng cho nh\u1eefng d\u1ef1 \u00e1n sau n\u00e0y.<\/li>\n<\/ul>\n<p>C\u1ee5 th\u1ec3 thay \u0111\u1ed5i ra sao, c\u00f9ng nhau t\u00ecm hi\u1ec3u nha!<\/p>\n<h3>1. T\u00e0i li\u1ec7u<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/document.png\" alt=\"document\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/www.freepik.com\/free-vector\/illustration-document-icon_2945058.htm#page=1&amp;query=document&amp;position=1\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/www.freepik.com\/free-vector\/illustration-document-icon_2945058.htm#page=1&#038;query=document&#038;position=1<\/a><\/p>\n<\/blockquote>\n<p>T\u00e0i li\u1ec7u l\u00fac b\u1ea5y gi\u1edd trong team g\u1ea7n nh\u01b0 kh\u00f4ng t\u1ed3n t\u1ea1i. C\u00f3 ch\u0103ng ch\u1ec9 l\u00e0 nh\u1eefng t\u00e0i li\u1ec7u h\u01b0\u1edbng d\u1eabn d\u00e0nh cho kh\u00e1ch h\u00e0ng ho\u1eb7c m\u1ed9t v\u00e0i cheat sheet d\u00e0nh cho dev. Nh\u1eadn ra \u0111i\u1ec1u n\u00e0y, m\u00ecnh b\u1eaft \u0111\u1ea7u k\u00eau g\u1ecdi m\u1ecdi ng\u01b0\u1eddi l\u00e0m t\u00e0i li\u1ec7u cho ch\u00ednh nh\u1eefng d\u1ef1 \u00e1n \u0111ang l\u00e0m.<\/p>\n<p>M\u1ed9t s\u1ed1 ng\u01b0\u1eddi cho r\u1eb1ng l\u00e0m t\u00e0i li\u1ec7u r\u1ea5t m\u1ea5t th\u1eddi gian v\u00e0 n\u1ebfu d\u00f9ng th\u1eddi gian \u0111\u00f3 \u0111\u1ec3 ph\u00e1t tri\u1ec3n t\u00ednh n\u0103ng th\u00ec hi\u1ec7u qu\u1ea3 h\u01a1n r\u1ea5t nhi\u1ec1u. \u0110i\u1ec1u \u0111\u00f3 kh\u00f4ng sai, tuy nhi\u00ean h\u1ecd v\u00f4 t\u00ecnh qu\u00ean \u0111i m\u1ee5c \u0111\u00edch c\u1ee7a t\u00e0i li\u1ec7u. D\u01b0\u1edbi g\u00f3c nh\u00ecn c\u1ee7a EGANY, vi\u1ebft t\u00e0i li\u1ec7u l\u00e0 vi\u1ebft cho t\u01b0\u01a1ng lai, cho nh\u1eefng b\u1ea1n m\u1edbi b\u1eaft \u0111\u1ea7u ho\u1eb7c cho ch\u00ednh c\u00e1c th\u00e0nh vi\u00ean trong team khi v\u1eeba chinh chi\u1ebfn \u1edf c\u00e1c d\u1ef1 \u00e1n kh\u00e1c tr\u1edf v\u1ec1. \u0110\u1ed3ng \u00fd l\u00e0 vi\u1ebft t\u00e0i li\u1ec7u kh\u00e1 m\u1ea5t th\u1eddi gian, ch\u01b0a k\u1ec3 m\u1ed7i l\u1ea7n thay \u0111\u1ed5i t\u00ednh n\u0103ng l\u1ea1i ph\u1ea3i c\u1eadp nh\u1eadt ho\u1eb7c b\u1ed5 sung th\u00eam. Tuy nhi\u00ean, tr\u00ean th\u1ef1c t\u1ebf th\u00ec t\u00e0i li\u1ec7u gi\u00fap team kh\u00e1 nhi\u1ec1u:<\/p>\n<ul>\n<li><strong>Ti\u1ebft ki\u1ec7m th\u1eddi gian on-board<\/strong>. Th\u1eddi gian on-board c\u00f3 ngh\u0129a l\u00e0 th\u1eddi gian b\u1eaft \u0111\u1ea7u t\u00ecm hi\u1ec3u d\u1ef1 \u00e1n. H\u1ea7u h\u1ebft nh\u1eefng \u0111i\u1ec1u c\u1ea7n bi\u1ebft v\u1ec1 d\u1ef1 \u00e1n \u0111\u1ec1u \u0111\u00e3 c\u00f3 trong t\u00e0i li\u1ec7u n\u00ean c\u00e1c b\u1ea1n m\u1edbi tham gia s\u1ebd d\u1ec5 d\u00e0ng n\u1eafm b\u1eaft d\u1ef1 \u00e1n h\u01a1n. Vi\u1ec7c trao \u0111\u1ed5i gi\u1eefa c\u00e1c team c\u0169ng d\u1ec5 d\u00e0ng h\u01a1n n\u1ebfu c\u00f3 t\u00e0i li\u1ec7u.<\/li>\n<li><strong>C\u1ee7ng c\u1ed1 ki\u1ebfn th\u1ee9c<\/strong>. Vi\u1ec7c vi\u1ebft t\u00e0i li\u1ec7u kh\u00f4ng h\u1ec1 d\u1ec5. B\u1ea1n s\u1ebd ph\u1ea3i d\u00f9ng t\u1eeb ng\u1eef, h\u00ecnh \u1ea3nh ho\u1eb7c th\u1eadm ch\u00ed l\u00e0 video \u0111\u1ec3 m\u00f4 t\u1ea3 t\u00ednh n\u0103ng, c\u00e1ch b\u1ea1n tri\u1ec3n khai ch\u00fang, t\u1ea1i sao b\u1ea1n l\u00e0m nh\u01b0 v\u1eady.. v.v&#8230; cho m\u1ed9t ng\u01b0\u1eddi ch\u01b0a bi\u1ebft g\u00ec v\u1ec1 d\u1ef1 \u00e1n. \u0110i\u1ec1u n\u00e0y \u0111\u00f2i h\u1ecfi b\u1ea1n ph\u1ea3i \u0111\u00e0o s\u00e2u, thu th\u1eadp v\u00e0 n\u1eafm v\u1eefng ki\u1ebfn th\u1ee9c \u0111\u1ec3 c\u00f3 th\u1ec3 gi\u1ea3i th\u00edch c\u1eb7n k\u1ebd nh\u1eefng \u0111i\u1ec1u b\u1ea1n \u0111\u00e3, \u0111ang ho\u1eb7c s\u1ebd l\u00e0m. Kh\u00f4ng \u00edt l\u1ea7n nh\u1edd l\u00e0m t\u00e0i li\u1ec7u m\u00e0 m\u00ecnh h\u1ecdc th\u00eam \u0111\u01b0\u1ee3c nhi\u1ec1u th\u1ee9 m\u1edbi v\u00e0 th\u1eadm ch\u00ed t\u00ecm ra gi\u1ea3i ph\u00e1p hay h\u01a1n so v\u1edbi gi\u1ea3i ph\u00e1p hi\u1ec7n t\u1ea1i.<\/li>\n<li><strong>C\u01a1 s\u1edf \u0111\u1ed1i chi\u1ebfu<\/strong>. Trong su\u1ed1t giai \u0111o\u1ea1n ph\u00e1t tri\u1ec3n c\u1ee7a d\u1ef1 \u00e1n, ch\u00fang ta s\u1ebd kh\u00f4ng tr\u00e1nh kh\u1ecfi nh\u1eefng bu\u1ed5i tranh lu\u1eadn, nh\u1eefng thi\u1ebfu s\u00f3t ho\u1eb7c nh\u1eefng hi\u1ec3u nh\u1ea7m khi truy\u1ec1n \u0111\u1ea1t \u00fd t\u01b0\u1edfng. T\u00e0i li\u1ec7u ch\u00ednh l\u00e0 m\u1ed9t d\u1ea1ng x\u00e1c nh\u1eadn nh\u1eefng th\u1ee9 ch\u00fang ta nghe, th\u1ea5y ho\u1eb7c ti\u1ebfp thu l\u00e0 \u0111\u00fang, \u0111\u1ee7 v\u00e0 ch\u00ednh x\u00e1c.<\/li>\n<li><strong>T\u0103ng gi\u00e1 tr\u1ecb d\u1ef1 \u00e1n<\/strong>. M\u1ed9t d\u1ef1 \u00e1n kh\u00f4ng c\u00f3 t\u00e0i li\u1ec7u th\u00ec d\u00f9 hay v\u00e0 h\u1eefu \u00edch t\u1edbi m\u1ea5y th\u00ec c\u0169ng kh\u00f3 l\u00f2ng \u0111\u01b0\u1ee3c ng\u01b0\u1eddi d\u00f9ng (\u1edf \u0111\u00e2y l\u00e0 developer) \u0111\u00f3n nh\u1eadn. B\u1ea1n th\u1eed t\u01b0\u1edfng t\u01b0\u1ee3ng React, Vue ho\u1eb7c c\u00e1c th\u01b0 vi\u1ec7n\/framework m\u00e0 b\u1ea1n \u0111ang s\u1eed d\u1ee5ng x\u00f3a to\u00e0n b\u1ed9 t\u00e0i li\u1ec7u c\u1ee7a h\u1ecd. \u0110\u1ec3 s\u1eed d\u1ee5ng ch\u00fang, b\u1ea1n s\u1ebd ph\u1ea3i \u0111\u1ecdc v\u00e0 hi\u1ec3u source code c\u1ee7a th\u01b0 vi\u1ec7n\/framework \u0111\u00f3. Kh\u00f4ng d\u1ec5 ch\u00fat n\u00e0o ph\u1ea3i kh\u00f4ng n\u00e0o?<\/li>\n<\/ul>\n<p>Team quy\u1ebft \u0111\u1ecbnh s\u1eed d\u1ee5ng Markdown \u0111\u1ec3 vi\u1ebft t\u00e0i li\u1ec7u. L\u00fd do team l\u1ef1a ch\u1ecdn markdown m\u00e0 kh\u00f4ng ph\u1ea3i c\u00e1c \u0111\u1ecbnh d\u1ea1ng kh\u00e1c v\u00ec:<\/p>\n<ul>\n<li>\u0110\u01a1n gi\u1ea3n, d\u1ec5 s\u1eed d\u1ee5ng<\/li>\n<li>Kh\u00f4ng y\u00eau c\u1ea7u c\u00e0i \u0111\u1eb7t th\u00eam ph\u1ea7n m\u1ec1m kh\u00e1c \u0111\u1ec3 \u0111\u1ecdc ho\u1eb7c vi\u1ebft. Text editor c\u00f3 s\u1eb5n ho\u1eb7c tr\u00ecnh duy\u1ec7t web (web browser) l\u00e0 \u0111\u1ee7<\/li>\n<li>Kh\u00e1 th\u00f4ng d\u1ee5ng tr\u00ean nhi\u1ec1u n\u1ec1n t\u1ea3ng, c\u00f3 th\u1ec3 convert th\u00e0nh HTML \u0111\u1ec3 hi\u1ec3n th\u1ecb tr\u00ean website<\/li>\n<\/ul>\n<p>Ngo\u00e0i ra, \u0111\u1ec3 gi\u1ea3m th\u1eddi gian vi\u1ebft c\u0169ng nh\u01b0 t\u1ea1o \u0111i\u1ec1u ki\u1ec7n cho m\u1ecdi ng\u01b0\u1eddi trong c\u00f4ng ty th\u00ec m\u00ecnh c\u00f3 t\u1ea1o ra nhi\u1ec1u m\u1eabu t\u00e0i li\u1ec7u kh\u00e1c nhau, m\u1ed7i t\u00e0i li\u1ec7u s\u1ebd ph\u00f9 h\u1ee3p cho m\u1ed9t m\u1ee5c \u0111\u00edch kh\u00e1c nhau. C\u00e1c b\u1ea1n c\u00f3 th\u1ec3 tham kh\u1ea3o <a href=\"https:\/\/github.com\/EGANY-Team\/document-templates\" rel=\"nofollow noopener\" target=\"_blank\">t\u1ea1i \u0111\u00e2y<\/a>.<\/p>\n<h3>Git<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/git-logo-700x293.png\" alt=\"git-logo\" \/><\/p>\n<p>Git th\u00ec kh\u00f4ng c\u00f2n xa l\u1ea1 g\u00ec v\u1edbi m\u1ecdi ng\u01b0\u1eddi trong team n\u1eefa. Tuy nhi\u00ean, t\u00ednh t\u1edbi th\u1eddi \u0111i\u1ec3m l\u00fac b\u1ea5y gi\u1edd th\u00ec m\u1ecdi ng\u01b0\u1eddi ch\u01b0a c\u00f3 m\u1ed9t quy tr\u00ecnh git c\u1ee5 th\u1ec3 qu\u1ea3n l\u00fd version (phi\u00ean b\u1ea3n) c\u1ee7a d\u1ef1 \u00e1n. T\u1eeb commit message, branch, merge, c\u00e1ch tag version, &#8230; h\u1ea7u h\u1ebft l\u00e0 &quot;ng\u1eabu h\u1ee9ng&quot;. S\u1ebd kh\u00f4ng sao n\u1ebfu quy m\u00f4 d\u1ef1 \u00e1n nh\u1ecf, s\u1ed1 l\u01b0\u1ee3ng th\u00e0nh vi\u00ean ch\u1ec9 t\u1eeb 1 t\u1edbi 2 ng\u01b0\u1eddi. Tuy nhi\u00ean, quy m\u00f4 d\u1ef1 \u00e1n \u0111\u00e3 l\u1edbn h\u01a1n r\u1ea5t nhi\u1ec1u. H\u01a1n n\u1eefa, n\u1ebfu gi\u1eef m\u00e3i c\u00e1ch l\u00e0m vi\u1ec7c &quot;ng\u1eabu h\u1ee9ng&quot; nh\u01b0 v\u1eady s\u1ebd kh\u00f4ng t\u1ed1t trong th\u1eddi gian d\u00e0i.<\/p>\n<p>\u0110\u1ec3 kh\u1eafc ph\u1ee5c \u0111i\u1ec1u n\u00e0y, team quy\u1ebft \u0111\u1ecbnh ch\u1ecdn theo m\u00f4 h\u00ecnh git theo b\u00e0i vi\u1ebft <a href=\"https:\/\/nvie.com\/posts\/a-successful-git-branching-model\/\" rel=\"nofollow noopener\" target=\"_blank\"><em>A successful Git branching model<\/em> c\u1ee7a Vincent Driessen<\/a>. T\u1ea5t nhi\u00ean, team s\u1ebd c\u00f3 m\u1ed9t ch\u00fat thay \u0111\u1ed5i \u0111\u1ec3 ph\u00f9 h\u1ee3p h\u01a1n v\u1edbi \u0111\u1eb7c th\u00f9 c\u00f4ng ty, c\u1ee5 th\u1ec3:<\/p>\n<ul>\n<li>B\u1ed5 sung nh\u00e1nh <code>staging<\/code> \u0111\u1ec3 ph\u1ee5c v\u1ee5 qu\u00e1 tr\u00ecnh test c\u1ee7a tester. Nh\u00e1nh n\u00e0y t\u01b0\u01a1ng \u1ee9ng v\u1edbi nh\u00e1nh <code>release<\/code> theo m\u00f4 h\u00ecnh tr\u00ean. L\u00fd do xu\u1ea5t hi\u1ec7n nh\u00e1nh n\u00e0y l\u00e0 \u0111\u1ec3 qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n t\u00ednh n\u0103ng m\u1edbi kh\u00f4ng b\u1ecb &quot;block&quot; v\u1edbi c\u00e1c t\u00ednh n\u0103ng ch\u01b0a \u0111\u01b0\u1ee3c release \u0111\u1ed3ng th\u1eddi t\u0103ng t\u00ednh \u1ed5n \u0111\u1ecbnh cho m\u00f4i tr\u01b0\u1eddng test<\/li>\n<li>Vi\u1ec7c merge branch ch\u1ec9 do m\u1ed9t ng\u01b0\u1eddi ph\u1ee5 tr\u00e1ch. Ng\u01b0\u1eddi n\u00e0y s\u1ebd ch\u1ecbu tr\u00e1ch nhi\u1ec7m review code v\u00e0 l\u00e0m vi\u1ec7c v\u1edbi tester \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o m\u1ecdi th\u1ee9 \u1ed5n th\u1ecfa khi deploy l\u00ean m\u00f4i tr\u01b0\u1eddng <code>production<\/code><\/li>\n<li>Thay v\u00ec merge tr\u1ef1c ti\u1ebfp v\u00e0o nh\u00e1nh <code>develop<\/code> th\u00ec developer s\u1ebd t\u1ea1o pull request \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o r\u1eb1ng ch\u1ec9 nh\u1eefng t\u00ednh n\u0103ng chu\u1ea9n b\u1ecb release m\u1edbi \u0111\u01b0\u1ee3c merge v\u00e0o develop<\/li>\n<\/ul>\n<p>B\u00ean c\u1ea1nh nh\u1eefng thay \u0111\u1ed5i tr\u00ean, team c\u0169ng tham kh\u1ea3o c\u00e1c d\u1ef1 \u00e1n l\u1edbn kh\u00e1c \u0111\u1ec3 \u00e1p d\u1ee5ng th\u00eam c\u00e1c quy \u0111\u1ecbnh v\u1ec1 commit message c\u0169ng nh\u01b0 versioning (\u0111\u00e1nh tag phi\u00ean b\u1ea3n). C\u1ee5 th\u1ec3:<\/p>\n<ul>\n<li>Commit message \u0111\u01b0\u1ee3c th\u1ed1ng nh\u1ea5t l\u00e0 s\u1ebd s\u1eed d\u1ee5ng ti\u1ebfng Anh, vi\u1ebft hoa \u0111\u1ea7u c\u00e2u v\u00e0 lu\u00f4n b\u1eaft \u0111\u1ea7u b\u1eb1ng \u0111\u1ed9ng t\u1eeb<\/li>\n<li>\u0110\u00e1nh tag version s\u1ebd tu\u00e2n theo chu\u1ea9n <a href=\"https:\/\/semver.org\/\" rel=\"nofollow noopener\" target=\"_blank\">SEMVER<\/a> thay v\u00ec n\u00e2ng theo ki\u1ec3u tuy\u1ebfn t\u00ednh nh\u01b0 tr\u01b0\u1edbc<\/li>\n<\/ul>\n<p>T\u1ea5t c\u1ea3 c\u00e1c thay \u0111\u1ed5i tr\u00ean \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng ngay sau bu\u1ed5i h\u1ecdp. Tuy nhi\u00ean, nh\u01b0 \u00f4ng b\u00e0 ta c\u00f3 n\u00f3i: <em>V\u1ea1n s\u1ef1 kh\u1edfi \u0111\u1ea7u nan<\/em>. Team g\u1eb7p kh\u00e1 nhi\u1ec1u kh\u00f3 kh\u0103n khi \u00e1p d\u1ee5ng:<\/p>\n<ul>\n<li>Kh\u00f4ng bi\u1ebft \u0111\u1eb7t commit message sao cho \u0111\u00fang do gi\u1edbi h\u1ea1n v\u1ec1 tr\u00ecnh \u0111\u1ed9 ng\u00f4n ng\u1eef<\/li>\n<li>T\u1ef1 \u00fd merge nh\u00e1nh t\u00ednh n\u0103ng v\u00e0o develop m\u00e0 kh\u00f4ng th\u00f4ng qua pull request<\/li>\n<li>Merge nh\u1ea7m nh\u00e1nh<\/li>\n<li>Kh\u00f3 kh\u0103n khi x\u00e1c \u0111\u1ecbnh version<\/li>\n<\/ul>\n<p>D\u00f9 v\u1eady, sau m\u1ed9t th\u1eddi gian l\u00e0m quen th\u00ec team c\u0169ng b\u1eaft \u0111\u1ea7u th\u00e0nh th\u1ea1o h\u01a1n v\u00e0 m\u1ecdi th\u1ee9 tr\u1edf n\u00ean su\u00f4n s\u1ebb h\u01a1n r\u1ea5t nhi\u1ec1u.<\/p>\n<h3>Custom React component<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/egany.cdn.vccloud.vn\/blogs\/wp-content\/uploads\/2021\/07\/component-600x450.png\" alt=\"component\" \/><\/p>\n<blockquote>\n<p>Ngu\u1ed3n \u1ea3nh: <a href=\"https:\/\/dribbble.com\/shots\/12531701-Design-system-elements\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dribbble.com\/shots\/12531701-Design-system-elements<\/a><\/p>\n<\/blockquote>\n<p>Nh\u01b0 \u0111\u00e3 \u0111\u1ec1 c\u1eadp b\u00ean tr\u00ean, team s\u1eed d\u1ee5ng <em>Bootstrap Keen Theme<\/em> cho h\u1ec7 th\u1ed1ng c\u0169. Tuy nhi\u00ean, \u0111\u1ec3 ph\u00e1t tri\u1ec3n trong th\u1eddi gian d\u00e0i v\u00e0 d\u1ec5 d\u00e0ng \u0111\u00e1p \u1ee9ng c\u00e1c nhu c\u1ea7u v\u1ec1 nh\u1eadn d\u1ea1ng th\u01b0\u01a1ng hi\u1ec7u th\u00ec team quy\u1ebft \u0111\u1ecbnh t\u1ea1o ra b\u1ed9 component ri\u00eang. V\u00ec \u0111\u00e3 c\u00f3 s\u1eb5n b\u1ed9 CSS ri\u00eang n\u00ean vi\u1ec7c n\u00e0y s\u1ebd kh\u00f4ng qu\u00e1 kh\u00f3 kh\u0103n v\u1ec1 vi\u1ec7c styling. \u00cdt nh\u1ea5t \u0111\u00f3 l\u00e0 \u0111i\u1ec1u team ngh\u0129 ban \u0111\u1ea7u.<\/p>\n<p>Tr\u00ean th\u1ef1c t\u1ebf khi tri\u1ec3n khai, ngo\u1ea1i tr\u1eeb c\u00e1c th\u00e0nh ph\u1ea7n c\u01a1 b\u1ea3n nh\u01b0 header, footer, button, &#8230; th\u00ec c\u00e1c component kh\u00e1c t\u01b0\u01a1ng \u0111\u1ed1i kh\u00f3 s\u1eed d\u1ee5ng v\u00ec:<\/p>\n<ul>\n<li>Team ch\u01b0a c\u00f3 kinh nghi\u1ec7m<\/li>\n<li>\u0110\u1eb7c th\u00f9 dashboard kh\u00e1c nhau<\/li>\n<li>Scope d\u1ef1 \u00e1n ch\u01b0a r\u00f5 r\u00e0ng<\/li>\n<li>Ch\u01b0a c\u00f3 t\u00e0i li\u1ec7u cho component<\/li>\n<\/ul>\n<p>Ch\u00ednh nh\u1eefng nguy\u00ean nh\u00e2n tr\u00ean khi\u1ebfn vi\u1ec7c ph\u00e1t tri\u1ec3n dashboard thi\u1ebft l\u1eadp \u1ee9ng d\u1ee5ng t\u01b0\u01a1ng \u0111\u1ed1i kh\u00f3 kh\u0103n. Team m\u1ea5t kh\u00e1 nhi\u1ec1u th\u1eddi gian \u0111\u1ec3 \u00e1p d\u1ee5ng c\u00e1c component \u0111\u00e3 ph\u00e1t tri\u1ec3n. T\u00ednh reusability (s\u1eed d\u1ee5ng l\u1ea1i) v\u1eabn ch\u01b0a cao, \u0111\u00f4i l\u00fac developer v\u1eabn ph\u1ea3i t\u1ef1 t\u1ea1o custom component cho dashboard c\u1ee7a ri\u00eang m\u00ecnh. C\u00f3 th\u1ec3 n\u00f3i \u0111\u00e2y l\u00e0 m\u1ed9t l\u1ef1a ch\u1ecdn kh\u00f4ng h\u1ee3p l\u00fd cho th\u1eddi \u0111i\u1ec3m hi\u1ec7n t\u1ea1i. D\u00f9 v\u1eady team v\u1eabn c\u1ed1 g\u1eafng v\u00e0 cho ra \u0111\u1eddi nhi\u1ec1u phi\u00ean b\u1ea3n EGANY Apps tr\u01b0\u1edbc khi quy\u1ebft \u0111\u1ecbnh thay th\u1ebf ch\u00fang b\u1eb1ng m\u1ed9t th\u01b0 vi\u1ec7n UI. Quy\u1ebft \u0111\u1ecbnh m\u00e3i sau n\u00e0y m\u1edbi \u0111\u01b0\u1ee3c \u0111\u1ec1 xu\u1ea5t n\u00ean c\u00f3 l\u1ebd m\u00ecnh s\u1ebd tr\u00ecnh b\u00e0y \u1edf m\u1ed9t b\u00e0i vi\u1ebft kh\u00e1c.<\/p>\n<h2>T\u1ea1m k\u1ebft<\/h2>\n<p>V\u00ec \u0111\u00e2y ch\u1ec9 l\u00e0 giai \u0111o\u1ea1n kh\u1edfi \u0111\u1ea7u, team ch\u01b0a g\u1eb7p nhi\u1ec1u kh\u00f3 kh\u0103n v\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt. Nh\u1eefng thay \u0111\u1ed5i \u0111a ph\u1ea7n t\u1eadp trung v\u00e0o quy tr\u00ecnh ho\u1eb7c nh\u1eefng th\u1ee9 li\u00ean quan \u0111\u1ebfn to\u00e0n b\u1ed9 h\u1ec7 th\u1ed1ng n\u00f3i chung, c\u1ee5 th\u1ec3:<\/p>\n<ul>\n<li>Vi\u1ebft t\u00e0i li\u1ec7u<\/li>\n<li>Chu\u1ea9n h\u00f3a git flow<\/li>\n<li>Th\u1ed1ng nh\u1ea5t c\u1ea5u tr\u00fac \u1ee9ng d\u1ee5ng<\/li>\n<\/ul>\n<p>Kh\u00f3 kh\u0103n duy nh\u1ea5t l\u00fac b\u1ea5y gi\u1edd ch\u1eafc c\u00f3 l\u1ebd l\u00e0 vi\u1ec7c ti\u1ebfp c\u1eadn c\u00f4ng ngh\u1ec7 m\u1edbi, l\u00e0m quen v\u1edbi quy tr\u00ecnh m\u1edbi (ch\u1eb7t ch\u1ebd h\u01a1n). L\u00fac b\u1ea5y gi\u1edd team v\u1eabn ch\u01b0a g\u1eb7p ph\u1ea3i nh\u1eefng kh\u00f3 kh\u0103n v\u1ec1 m\u1eb7t k\u1ef9 thu\u1eadt ho\u1eb7c b\u1eaft g\u1eb7p c\u00e1c l\u1ed7 h\u1ed5ng trong quy tr\u00ecnh \u0111\u00e3 ch\u1ecdn. C\u00f3 l\u1ebd m\u00ecnh s\u1ebd n\u00f3i v\u1ec1 ch\u00fang \u1edf m\u1ed9t b\u00e0i vi\u1ebft kh\u00e1c.<\/p>\n<p>C\u00e1m \u01a1n c\u00e1c b\u1ea1n \u0111\u00e3 \u0111\u1ecdc. H\u1eb9n g\u1eb7p l\u1ea1i c\u00e1c b\u1ea1n \u1edf b\u00e0i vi\u1ebft ti\u1ebfp theo trong series <strong>Frontend Du K\u00fd<\/strong>. Happy hacking!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L\u1eddi m\u1edf \u0111\u1ea7u T\u00ecnh c\u1edd \u0111\u1ecdc b\u00e0i vi\u1ebft Hype Driven Development l\u00e0m m\u00ecnh nh\u1edb l\u1ea1i h\u1ed3i m\u1edbi b\u1eaft \u0111\u1ea7u v\u00e0o ngh\u1ec1, ch\u1ea1y theo c\u00f4ng ngh\u1ec7 m\u1edbi m\u1ed9t c\u00e1ch m\u00f9 qu\u00e1ng \u0111\u1ec3 r\u1ed3i ph\u1ea3i tr\u1ea3 gi\u00e1 \u0111\u1eaft b\u1eb1ng nh\u1eefng \u0111\u1ee3t refactor\/migrate k\u00e9o d\u00e0i h\u00e0ng tu\u1ea7n, th\u1eadm ch\u00ed l\u00e0 h\u00e0ng th\u00e1ng tr\u1eddi. Tuy l\u00e0 nh\u1eefng tr\u1ea3i nghi\u1ec7m kh\u00f4ng vui nh\u01b0ng \u0111\u00f3 \u0111\u1ec1u l\u00e0 nh\u1eefng b\u00e0i h\u1ecdc \u0111\u1eaft gi\u00e1 team EGANY c\u00f3 \u0111\u01b0\u1ee3c trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n s\u1ea3n ph\u1ea9m. C\u0169ng nh\u00e2n c\u01a1 h\u1ed9i n\u00e0y, m\u00ecnh quy\u1ebft \u0111\u1ecbnh &quot;ra m\u1eaft&quot; chu\u1ed7i b\u00e0i vi\u1ebft k\u1ec3 v\u1ec1 qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n c\u1ee7a nh\u1eefng d\u1ef1 \u00e1n<\/p>\n","protected":false},"author":2,"featured_media":894,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27,1],"tags":[92,88,91,113,87,90,93,94,32,86,64,85,89,30],"_links":{"self":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/889"}],"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=889"}],"version-history":[{"count":0,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/posts\/889\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media\/894"}],"wp:attachment":[{"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/media?parent=889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/categories?post=889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egany.com\/blogs\/wp-json\/wp\/v2\/tags?post=889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}