Tôi vẫn có tác dụng new bài viết này một chút mang đến năm mới, làm cho nó gãy gọn gàng cùng dễ theo dõi và quan sát rộng, vì chưng vậy, đừng băn khoăn nếu bạn thấy nó khá khác so với bài bác các bạn đã từng có lần đọc trước đó và tìm kiếm thấy vài ba chủ kiến trái ngược. Phiên bạn dạng cho hồ hết năm ngoái có thể được search thấy sinh hoạt GitHub.

Bạn đang xem: Lộ trình học front end

Web development là một trong những nghành luôn luôn thay đổi — bí quyết chúng ta kiến tạo website thời buổi này trọn vẹn không giống với giải pháp họ sử dụng vài ba thời gian trước đây. Với không hề ít luật tất cả sẵn với rất nhiều phương pháp new xuất hiện hàng ngày, phần nhiều những Frontover developer sẽ đều phải sở hữu phần đông dịp Cảm Xúc băn khoăn về tuyến đường mình sẽ đi.


*

*

Tôi là người sáng tác của bài viết “Developer Roadmap”, trong những số đó liệt kê suốt thời gian, dụng cụ với những technology bạn phải sử dụng nhằm lao vào những mảng nlỗi frontkết thúc, backover tuyệt operation. Tôi viết lộ trình này thứ nhất vào năm 2017, update một đợt năm 2018 với lần sửa thay đổi vừa mới đây tuyệt nhất là vào năm nay. lúc tôi viết bài viết này, lộ trình mang đến Frontover developer đã có update lại. Tôi vẫn đang thao tác với quãng thời gian giành riêng cho backend cùng operation. Mong là nó sẽ tiến hành kiến thiết vào vài ba ngày nữa.


kamranahmedse/developer-roadmap


Roadmap khổng lồ becoming a website developer in 2019. Contribute lớn kamranahmedse/developer-roadmap development by creating an…


github.com


Trong bài viết này, tôi đã tóm tắt lại một ít với chia sẻ cùng với bạn hễ lực ẩn dưới việc tạo thành hầu hết quãng thời gian này, một vài ba lời disclaimer nếu như khách hàng ra quyết định đi theo phần nhiều suốt thời gian này dẫu vậy sau cuối lại xẩy ra sự chũm, với một vài ba lời khulặng dành riêng cho mình ví như bạn muốn trở thành một frontover developer “hiện tại đại” của năm 2019.

Động lực

Trước Khi bước đầu với bài viết, nhằm chúng ta rõ rộng về tôi thì tôi đã làm Fullstack Development vào 6 năm vừa qua với hiện đang làm cho lead engineer trên tajawal, chỗ mà tôi cần có tác dụng sống nhiều địa chỉ. Không chỉ là sở thích, Việc theo dõi những Xu thế, đưa ra ra quyết định vào technology với sản xuất hễ lực, training những developer không giống là 1 phần quá trình của mình.

Web Development vẫn trở nên tân tiến tương đối nhiều và hết sức nkhô giòn. Số sàng lọc hiện có cho 1 frontkết thúc developer không ít tới nút hoàn toàn có thể tạo trsống mắc cỡ cùng với bất cứ ai. Tôi khá active sầu trên những cộng đồng và opensource; Vào năm 2017, Circa, một GS đại học cũ của tớ vẫn chuẩn bị một cỗ các lộ trình cho sinc viên đẻ bọn họ hiểu rõ về Thị phần development hiện thời, cô contact cùng với tôi để đưa mang đến cô một list các cách thức và công nghệ để cải cách và phát triển website. Tôi vẫn viết lại một bạn dạng raw cùng gửi cho cô, tuy vậy tiếp nối tôi đưa ra quyết định cải tiến nó một chút ít và đưa nó lên GitHub nhằm hoàn toàn có thể trình làng điều này cho bất cứ ai mỗi một khi tôi được đặt câu hỏi. Và chính là giải pháp cơ mà phần đa trong suốt lộ trình này thành lập.

Disclaimer

Trước khi bạn bắt đầu với lộ trình, hãy ghi nhớ một vài disclaimer như sau:

Mục đích của quãng thời gian này là cung cấp cho mình ý tưởng phát minh về bối cảnh phổ biến và lí giải các bạn nếu khách hàng không biết buộc phải học tập gì tiếp theo sau, cũng như hoàn toàn có thể không hề khuyến nghị bàn sinh hoạt rất nhiều thứ đã thích hợp thời/ vẫn là Xu thế. Bạn yêu cầu có những sự hiểu rõ sâu xa nhất quyết về nguyên nhân tại sao một tool sẽ cân xứng vào một trong những hoàn cảnh rộng những tool khác, cùng hãy đừng quên “xu hướng” không bao giờ đồng nghĩa cùng với “phù hợp nhất”.

Thứ đọng 2, hãy phân tích một chút ít về Thị phần thao tác làm việc của bạn.

Đừng làm lơ thực tế là ngôn từ và tool hoàn toàn có thể phụ thuộc vào rất nhiều vào Thị trường, cho nên vì vậy tuyệt phân tích về Thị trường thao tác mà lại nhiều người đang nhắm vào.

Thứ đọng 3, chúng ta không quan trọng phải học với biết số đông thứ được danh mục ra trong bài viết này.

quý khách hàng không cần thiết phải học phần đa máy được liệt kê ở chỗ này để có thể kiếm được công việc trước tiên cho chính mình. Các quãng thời gian được liệt kê ở chỗ này dường như khôn cùng đao lớn búa mập, cơ mà chớ nhằm bị bọn chúng dọa nếu như bạn vừa new chỉ bước chân vào nghành web development. Tôi chỉ đang nỗ lực chuyển vào toàn bộ gần như thiết bị mà lại sau cuối các bạn sẽ bắt buộc học tập cùng thực hiện. Quý khách hàng có thể học tập những phần căn uống bản tối tphát âm với liên tục học hầu như phần sót lại trong lúc phát hành trang web.

Giai đoạn 1 — Sẵn sàng cho công việc

Nếu các bạn là fan mới bước đầu còn chỉ vừa new bước vào nghành website development, bao gồm một quãng thời gian khác cho mình. Hãy chú ý vào trong suốt lộ trình tiếp sau đây với chấm dứt tìm hiểu thêm nữa; kết thúc những mục được liệt kê trong quãng thời gian này cùng quay lại sau khi bạn sẽ tiến hành một vài dự án sử dụng bọn chúng.

Xem thêm: Các Mã Chứng Khoán Ngành Dược : Cổ Phiếu Ngành Dược "Hụt Hơi"


*

*

Chỉ nên học tập các mục được liệt kê với các bạn sẽ gồm từ bỏ hotline bản thân là một trong những website developer cùng tìm các bước trong Thị phần lao hễ. Tôi biết không hề ít fan đã với sẽ kiếm chi phí tương đối trường đoản cú công việc freelancer hoặc fulltime. Dành thời gian đến tất cả những mục được liệt kê vào trong suốt lộ trình, nắm rõ tất cả đầy đủ điều này, đồng thời thực hành thực tế thiệt những. Hãy làm cho những và không ít dự án; đây là list một số trong những lưu ý cơ mà bạn có thể có tác dụng.

Task

Tạo ra một Stopwatch dễ dàng hoàn toàn có thể start, stop, pause và reset.

Lúc chúng ta đã hoàn thành những Việc này, hãy mày mò về những loại control version system (hệ thống kiểm soát và điều hành phiên bản), khám phá phương pháp thực hiện cơ phiên bản của Git cùng chế tạo ra profile bên trên GitHub.


*

Khi các bạn đang ngừng công đoạn này, hãy tiếp tục với thực hiện các task sau cho các project các bạn vẫn triển khai trong tiến trình 1:

Thêm bootstrap cho những dự án bên trên bằng phương pháp thực hiện npm hoặc yarn.Chuyển đổi những dự án công trình để sử dụng BEMViết CSS vào SASSTự rượu cồn vấn đề biến đổi SASS thanh lịch CSS bằng cách áp dụng NPM ScriptGiai đoạn 3 — Tăng tốc

Giai đoạn này sẽ đến vài ba lần, và là thời điểm bạn bước chân vào mảng frontover development hiện đại. Hãy liên tiếp và tìm hiểu thêm về JavaScript. Tìm hiểu Webpaông chồng là gì, hiểu các có mang không giống nhau với tại vì sao này lại cần thiết. Hiểu babel là gì, tại vì sao họ áp dụng nó, tò mò cách tích phù hợp với webpaông xã và sau cùng tò mò biện pháp lint code của người sử dụng với ESlint. Tất cả những mục được liệt kê trong quá trình này xoay xung quanh webpachồng.


Quý khách hàng sẽ bước đầu nhận được “hương thơm vị” mordern frontend development vapf vào buổi tối cuối tuần trước tiên của quy trình tiến độ này. Khi chúng ta sẽ kết thúc quy trình tiến độ này, hãy liên tiếp với triển khai quá trình tiếp sau đây nhằm nắm rõ rộng về các tool

Task:

Tạo 1 npm package lấy tên người dùng cùng trả về danh sách những link được tra cứu thấy bên trên mxh (giả dụ tồn tại). Nó hoàn toàn có thể được áp dụng trong browser, gói lại với webpaông chồng, áp dụng babel để phiên mã với áp dụng ESLint đến linting.Tạo một áp dụng tovì chưng menu đơn giản, sử dụng SASS mang đến CSS, thêm bootstrap , sử dụng BEM, dịch mã JavaScript bởi babel, đóng gói với webpaông chồng, tạo bạn dạng dựng buổi tối ưu và thực hiện nó trên Github Pages.Giai đoạn 4 — Modern Frontend Application

Cách tiếp theo là mày mò về một frontover framework. Có những gạn lọc nhưng phần lớn gạn lọc phổ cập nhất hiện nay là React, Angular và Vue. Tôi gợi nhắc bạn nên tò mò React

Trước hết hãy khám phá React, kế tiếp mày mò về CSS trong JS, hơn nữa, trường hợp mê thích bạn có thể xem các Styled Component với CSS modules nếu bạn muốn.


Lúc chúng ta sẽ biết về React, hãy tiếp tục cùng đọc về các Progressive website apps. Bây giờ đồng hồ các bạn đã biết những frontend framework, rất nhiều vật dụng này sẽ không còn thể có tác dụng cạnh tranh bạn. Hãy coi PWA checklist, phát âm về service workers, tính toán performance, áp dụng lighthouse và coi những trình chú ý API nhưng chúng ta có thể dùng làm phát huy ưu thế của chính bản thân mình. Ví dụ: tàng trữ, tính toán công suất, thực hiện lighthouse với xem những API browser không giống nhau cơ mà bạn có thể áp dụng nhằm, ví dụ: Storage, Location, Notifications, Device Orientation cùng Payments. Dường như buộc phải đọc về RAIL mã sản phẩm với PRPL pattern.

Một khi bạn đang xong xuôi bài toán này, các bạn sẽ có thể Hotline mình là một trong những frontkết thúc developer tiến bộ. Hãy đảm bảo là chúng ta thực hành hầu như gì vẫn học. Dưới đấy là list phần lớn task chúng ta có thể chọn để thực hiện:

Tạo một ứng dụng dễ dàng và đơn giản có thể chấp nhận được các bạn lựa chọn 1 vài ba hashtag với dùngAPI tìm tìm của Twitter nhằm tra cứu hấp thụ cùng hiển thị cho bạn những tweet vừa mới đây duy nhất cho các hashtag đó trong lưới bố cục tổng quan nlỗi trello. Cố cố gắng ghim những hashtag nhằm Lúc người dùng làm cho new trang, trang sẽ nhớ những hashtag nhưng mà chúng ta đang chọn. Sử dụng React Router và thêm về những page.Giai đoạn 5 — Automated Testing

Học cách viết automated chạy thử cho những ứng dụng của các bạn sẽ khiến cho bạn đỡ hoa mắt hơn sau này cùng để giúp các bạn gồm một vị trí giỏi rộng trong công việc. Trước hết, hãy thường xuyên và tìm hiểu những các loại demo khác nhau, các có mang không giống nhau nlỗi mocking, stubs, vv. Sau kia, hãy thường xuyên và mày mò Jest, Enzyme và Cypress giống như như thế. Dường như hãy học tập cách tính tân oán phạm vi chất vấn.


Tasks

Về phần task, hãy liên tục với viết unit, integration, functional test cho vận dụng cơ mà các bạn đã sản xuất sinh hoạt quy trình vật dụng 4 trnghỉ ngơi về trước.

Giai đoạn 6 — Static Type Checkers

Type checker giúp đỡ bạn khiến cho code của mình dễ dàng duy trì rộng Khi được trở nên tân tiến lên, tăng thêm sự linch hoạt Khi thực hiên tái cấu trúc, hỗ trợ tốt rộng những IDE với là kiểu dáng tư liệu rất tốt cơ mà chúng ta cũng có thể giành được. Có đa phần là Flow cùng TypeScript vào tên miền này. Tuy nhiên, Typescript dường như có không ít sự can dự hơn, cùng tôi khuyên bạn nên chọn nó.


khi bạn đã hoàn thành việc học tập TypeScript, hãy liên tiếp với thay đổi ngẫu nhiên vận dụng JavaScript hiện có làm sao của chúng ta thanh lịch TypeScript.

Giai đoạn 7 —Server-side Rendering

Các áp dụng server-side rendering hỗ trợ cho công suất vận động xuất sắc rộng, với cải thiện SEO hơn các áp dụng client rendering. Mặc dù phía trên không phải là một trong đòi hỏi, mà lại Server-side rendering chắc chắn sẽ giúp đỡ các bạn trong việc tạo ra những ứng dụng frontend xuất sắc hơn. Có những chắt lọc dựa vào frontover framework mà bạn chọn; cơ mà nếu khách hàng sẽ lựa chọn React.js thì bạn nên thực hiện Next.js, điều này giúp SSR trlàm việc đề nghị dễ dàng.