Làm thế nào để trở thành Web Developer – Phần 2

Ở phần trước, mình đã chia sẻ đôi điều về vị trí Web Developer, những hướng phát triển chung cũng như lộ trình học mà các bạn nên làm theo.

Ở phần này, chúng ta sẽ đi sâu hơn vào những kiến thức từ cơ bản đến nâng cao mà các bạn cần phải biết và trau dồi nhé!

Những kiến thức mình nêu ra trong bài được chia làm 2 phần là cơ bản nâng cao:

  • Cơ bản là những kiến thức bạn cần có để có thể làm được việc ở những vị trí nhập môn như fresher, junior. Những kiến thức này không nhiều và không khó, bạn có thể tự học trong 1-6 tháng (xem nguồn cuối bài)
  • Nâng cao là những kiến thức bạn nên có để phát triển lên các vị trí cao hơn như senior, software architecture… Những kiến thức này khá rộng và nhiều, khó tự học. Bạn phải học bằng cách đọc nhiều sách, học nhiều, sau đó thử áp dụng và trải nghiệm chúng trong dự án thực tế.
  • Những kiến thức về framework, công nghệ rất dễ thay đổi, mau hết hạn. Nắm vững kiến thức nền sẽ khiến bạn học framework/công nghệ dễ hơn. Ngoài ra, nếu tập trung học chuyên sâu một công nghệ, bạn sẽ trải nghiệm được nhiều kiến thức rất hay và lạ.

Kiến thức mảng Front-end

Cơ bản

Tuy nhiên, để dễ xin việc, bạn nên lận lưng cho mình một số kiến thức về:

  • Một số library/framework JS nào đó như jQuery, AngularJS, ReactJS
  • Một framework CSS, hiện Bootstrap đang là framework nổi tiếng nhất
  • Kĩ năng cắt PSD và chuyển thành HTML/CSS
HTML/CSS/JS là bộ ba mà front-end developer nào cũng phải biết

Nâng cao

Chuyên sâu JavaScript

  • ES6, Design Pattern,
  • Mô hình MVC và MVVM
  • Asynchronous Code (callback, promise, async/await)
  • Unit Test (Jasmine, Mocha, Karma, Jest)
  • Code Performance
  • JS Framework: VueJS, ReactJS, AngularJS. Tới tầm này thì việc học một ngôn ngữ mới là chuyện không hề khó!

Chuyên sâu CSS

  • Module và Naming convention: SMACSS, BEM
  • Animation, Border, Shadow
  • Layout: Flexbox, CSS Grid
  • CSS Preprocessor như Styllus LESS, SASS
  • CSS Framework: Foundation, Bootstrap, Materialize, SemanticUI….

NodeJS được dùng để viết code ở phía back-end. Tuy nhiên, những công cụ front-end hiện tại đều sử dụng NodeJS và npm để build, minify, bundle.

Do đó bạn cần biết thêm về npm và các tool liên quan:

  • NodeJS và npm
  • Cấu trúc project, chia code thành module
  • Webpack/Gulp/Grunt
  • Babel
  • ESLint
Hiện tại, các công cụ của front-end dev đều dựa trên NodeJS

Bonus thêm

  • Responsive Design
  • Design cơ bản tới nâng cao
  • Biết UI/UX cơ bản để có thể làm việc với designer, tạo ra trải nghiệm tốt nhất cho người dùng

Back-end

Cơ bản

  • Cấu hình server và deploy: Tomcat, Nginx, ISS, Apache
  • Mô hình MVC & RestAPI
  • Database Query và Design (SQL Database)
  • Thuật toán: BigO, Stack, Queue, Hash Table, Tree
  • Clean Code
  • CMS (WordPress, Joomla, …) cho các bạn PHP

Để đi phỏng vấn và xin việc, bạn cũng chỉ cần thành thạo 1 ngôn ngữ và có kinh nghiệm sơ với một framework.

Một lưu ý nhẹ là đôi khi back-end developer cũng phải biết chút xíu về HTML, CSS để làm công việc của front-end nhé.

Nâng cao

Học ngôn ngữ back-end gì?

Khác với front-end, chỉ có HTML/CSS/JS, bạn có thể chọn một trong nhiều ngôn ngữ để viết back-end như C#, Java, PHP, Python,…

Theo kinh nghiệm tìm việc và số liệu từ các trang tuyển dụng, ba ngôn ngữ back-end có số lượng tuyển dụng lớn nhất hiện tại là: Java, C# và PHP. Các ngôn ngữ như Python, Ruby có lượng job ít hơn, lương thì nhỉn hơn đôi chút vì khó tìm lập trình viên hơn.

Đa phần các ngôn ngữ đều tương tự nhau. Để thành thạo một ngôn ngữ là chuyện khá mất thời gian, nhưng để có thể làm việc được với một ngôn ngữ, bạn chỉ cần nắm những điều sau:

  • Syntax của ngôn ngữ
  • Các API và thư viện cơ bản
  • Package Manager
  • Một hai Framework phổ biến
  • Unit Test Framework

Đôi lời về Full-stack Developer

Như mình đã nói ở bài trước Full-stack Developer là những con người đa năng, hai tay hai súng, có khả năng chơi luôn cả 2 từ front-end tới back-end. Đôi khi họ còn kiêm luôn cả vị trí System Design và DevOps.

Lương của Full-stack thường nhỉnh hơn Front-End và Back-end một chút vì họ phải nắm nhiều trọng trách hơn. Điều này không có nghĩa là Full-stack giỏi hơn Front-end hay back-end. Full-stack có kiến thức rộng hơn, còn front-back có kiến thức sâu hơn, không cái nào giỏi hơn cái nào!

Nhiều bạn mới học lập trình hay đặt mục tiêu là trở thành full-stack developer. Theo mình, trở thành full-stack thật sự rất khó, kiến thức phải rộng, và phải thường xuyên cập nhật nhiều thứ.

Do đó, các bạn mới học đừng nên đặt mục tiêu là trở thành full-stack. Bản thân mình từng làm back-end trước, sau đó mới dần dần tìm hiểu về front-end DevOps, Cloud.

Full-stack không có nghĩa là giỏi hơn front-end hay back-end

Học ở đâu, học thế nào?

Theo kinh nghiệm của mình, cách tốt nhất để học công nghệ nói chung là:

  • Nhập môn: Học theo kiểu interactive, vào codeacademy, freecodecamp để code trực tiếp theo hướng dẫn, vừa code vừa học. Cách này rất vui, dễ nhớ lại không gây nhàm chán.
  • Nhập môn: Học môn số khoá nhập môn trên itclass, pluralsight… và một số trang khác. Do có video nên các bạn có thể nghe giảng và làm theo, khá dễ học. Tuy nhiên nhiều khoá học khá dài nên dễ gây buồn ngủ.
  • Nâng cao: Kiếm sách công nghệ về đọc và code theo. Cá nhân mình hay dùng cách này. Cách này hơi mệt, dễ buồn ngủ. Tuy nhiên, trong sách có những kiến thức hệ thống, kiến thức chuyên sâu mà bạn sẽ không tìm được trên web hay video.
  • Nâng cao: Cái quan trọng nhất là học xong phải làm. Hãy dùng kiến thức bạn đã học để code một project đơn giản. Khi làm, gặp sự cố, hãy Google tìm cách giải quyết, bạn sẽ mò ra được nhiều thứ hay ho lắm đấy.
Có rất nhiều cách để học lập trình web: web, ebook, video, điển hình như w3schools

Vài lời khuyên cuối

Bài viết cũng dài rồi nên xin tổng kết bằng đôi lời khuyên cho các bạn:

  • Khi không biết nên học gì, hãy đọc… quảng cáo tuyển dụng
  • Học chuyên sâu, học cho vững kiến thức nền chứ đừng vội học framework hay công nghệ
  • Học kiểu chữ T: Biết rộng và chuyên sâu một thứ
  • Không ngại tự học, đừng gắn chặt mình với một ngôn ngữ hay công nghệ. Bạn code được C# thì cũng học được Java, học được PHP để mà code
  • Học hỏi không ngừng trên pluralsight, medium, quora
  • Tìm hiểu sơ về DevOp: Docker, CI, CD
  • Tìm hiểu sơ về Cloud: Azure, AWS

Hi vọng hai phần của bài viết sẽ giúp ích cho các bạn trên con đường bắt đầu trở thành web developer. Nếu có thắc mắc gì, các bạn cứ thoải mái hỏi trong phần comment nhé!

Bonus

Các bạn có thể xem clip livestream của mình và Codeaholicguy, hoặc xem slide tổng kết trong phía dưới nhé.

Advertisements

37 thoughts on “Làm thế nào để trở thành Web Developer – Phần 2”

  1. Anh cho em hỏi là mình nên nắm bắt và hiểu hế nodejs mới học đến expressjs phải ko anh

    Like

      1. dạ em cảm ơn anh, à em có thắc mắc là em có nên tìm hiểu thằng react js mà em chỉ biết sơ về htm css không ạ

        Like

  2. dạ anh ơi cho em hỏi mình nên học ngành nào để bổ sung kiến thức trở thành web developer vậy ạ ? Trường em có các ngành Hệ thống thông tin, Kĩ thuật phần mềm, Mạng máy tính và Khoa học máy tính ạ ?

    Like

  3. Mình cũng đang làm web dev nhưng ko chuyên sâu về js, chỉ làm java với jsf. h muốn chuyển qua làm bên javascript thì nên học j? Cảm ơn bạn nhiều.

    Like

      1. ý mình là h mình cũng có kiến thức căn bản về javascript nhưng ko thực sự vững mà muốn học nữa thì ko biết học cái j. Y như là cái j cũng biết chút chút nhưng ko cái nào rành ấy. H cũng chỉ đang học framework thôi.

        Like

  4. 1. Vẫn là em, trước khi đọc bài của bác, em phải bật chrome developer tool sửa giao diện, xóa tất cả vùng đen xì, tăng chiều rộng content =))
    Bác không đổi giao diện thì lần nào vào e cũng nói (cho vui :v)
    2. Em mà đọc được bài này sớm chắc không dám học lập trình =))
    Nhìn thấy nhiều quá sợ =)) (nhưng giờ thì thích :v)
    3. Cảm ơn thánh, bài viết rất bổ ích =))

    P/s: khi nào đổi được giao diện e sẽ hô 500 ae đến vỗ tay =))

    Like

    1. Nói nhỏ e nghe nè, vô bằng mobile đi, xem giao diện mobile cho thoáng =))

      2 là yên tâm đi, đọc mới biết trình độ mình tới đâu, đừng để như anh hồi mới ra trường, biết chút bẻo mà cứ nghĩ mình tầm senior :))

      Liked by 1 person

      1. 1. Nếu em chưa học mà đọc bài này của a thì mới sợ không dám học, chứ giờ em đi làm rồi, phải đọc chứ, cơ mà thấy mình cùi quá, còn thiếu nhiều quá, quá nhiều thứ chưa biết @@

        2. Em đi làm cho nên vào mobile không tiện =))

        3. Sau khi viết xong điều thứ 2, thì thử thu nhỏ trình duyệt và đã ok =))
        ( Tưởng không ok thì chắc lại phải sử dụng chrome developer tool thần thánh, nhưng mà không phải để xóa element nữa, mà là bật chế độ xem ở mobile 😀 )

        4. Viết xong điều thứ 3 mới nghĩ rằng, đây chỉ là cách giải quyết tạm thời =)) chừng nào a không đổi giao diện thì e sẽ còn raise :v

        Thân !

        Liked by 1 person

  5. Nắm được HTML/CSS/Bootstraps, cắt được tầm 10 trang PSD sang HTML/CSS rồ thì liệu khi đi xin việc người ta có nhận mình không anh?.

    Like

  6. Front là code mặt tiền
    Back end nằm dưới đi liền Data
    Phần trên thì web nở hoa
    Còn anh bên dưới như là thân cây
    Dev nào mà nắm được ngay
    Lương tầm chục củ phẩy tay có liền

    Liked by 1 person

  7. NodeJS được dùng để viết code ở phía [front-end]. Tuy nhiên, những công cụ front-end hiện tại đều sử dụng NodeJS và npm để build, minify, bundle.

    Đoạn này viết nhầm back-end thành front-end nè bác Hoàng

    Like

  8. 4 năm kinh nghiệm nhưng không biết mình ở đâu.

    Blog code dạo ạ, nhờ anh tư vấn em cái vấn đề này, em đi làm được 4 năm hơn rồi, project lớn nhỏ cũng làm khoảng hơn 15 cái.

    Em có thể tự mình làm 1 project riêng hoặc làm theo nhóm và trong nhóm làm thường có tiếng nói và là người đưa ra những quyết định và hầu hết là các tình huống xảy ra em đều có thể control được hoặc ít nhất cũng tìm hiểu để giải quyết được.

    Tuy nhiên dạo gần đây lúc phỏng vấn cho vị trí Backend dev thì anh leader phỏng vấn em có nói vầy em thấy đúng đúng nhưng cũng rất mơ hồ: “Anh thấy em chưa hiểu gì và chưa làm về backend”.

    Tổng hợp các câu hỏi em không trả lời được như sau ạ:

    1. Trong PHP thì string được lưu dưới dạng nào?
    2. Trong web dev thì trường hợp không muốn phải chờ quá 3s để sever response về, phải làm thế nào?
    3. Muốn tăng performance cho sever thì cần cải thiện gì ở câu lệnh SQL
    4. Laravel: hàm with() trong Laravel relationship thực chất là gì. Câu này em không trả lời được nhưng em hiểu bản chất nó là ứng với mỗi row trong table A sẽ gọi tất cả các rows con trong table B và đưa vào 1 field của row ở table A dưới dạng
    A: _column_1
    _column_2
    _column_X: array/collection của rows ở table B.

    Nhờ các anh là người có kinh nghiệm chỉ ra vấn đề cũng như cho em một hoặc một vài lời khuyên, em cảm ơn Blog!

    Like

    1. Hi em, những câu như câu 1, 2,3 thì thuộc về kiến thức căn bản rồi, anh nghĩ các bạn mới ra trường hoặc đã làm được 1,2 năm sẽ biết chứ nhỉ?
      Câu 4 thì do anh chưa làm Laravel nhưng mò document cũng thấy, https://laravel.com/docs/5.5/eloquent-relationships#eager-loading ; bản chất nó chỉ là eager load thôi.

      Nói chung là em nên học sâu hơn về cơ bản, tìm hiểu bản chất những framework mà mình sử dụng.

      Hoặc cũng có thể kiếm công ty khác PV nhé. Thời anh đi PV không bị hỏi mấy câu chuyên sâu về framework như vậy 😀

      Like

      1. Dạ, ý em không phải là hỏi câu trả lời anh ạ. Mấy câu đó mặc dù không biết lúc đó nhưng chỉ cần về coi lại là nhớ ra ngay.

        1, 2, 3 bản chất là làm được mà không nói được. Câu 4 thì đại ý hỏi là dịch leejnhj ->with( ) ra thành dòng select ở trong mySQL

        Nên cái em thắc mắc là họ cần gì ở 1 Backend Developer để em nghiên cứu về vấn đề đó, em biết chắc chắn họ không phải cần một Dev biết PHP lưu string dưới dạng Array.

        Em cảm ơn.

        Like

      2. Họ cần gì ở back-end developer thì trong bài viết anh đã nói rõ rồi nhé. Còn nếu em làm được mà không nói được thì cứ cố gắng luyện kĩ năng PV nhiều hơn thôi ha 😉

        Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s