Khi backend developer: Xây dựng giao diện của 1 website.

Bài viết là suy nghĩ của mình một java backend developer khi bắt tay vào xây dựng giao diện web.

Trong quá trình phát triển một web app thì backend và frontend dĩ nhiên là không thiếu phần nào. Đối với 1 backend developer như mình thì việc thao tác ở phía backend đã khá là quen thuộc thì đôi khi số phận vẫn bắt mình phải làm việc với cả phần frontend. Giả sử một ngày nào đó ngoài công việc 8 giờ 5 ngày, mình muốn làm một cái website gì đó hay ho thì ngoài những thứ đã quá quen thuộc ở phía backend thì rất cần các công cụ giúp mình xây dựng phần giao diện nhanh nhẹn, chỉn chu, làm ít được nhiều, tăng cường sức mạnh, giảm áp lực cho sở đoản.

Về 2 thành phần chính mình chọn:

Vue.js: chủ quan thì mình thấy nó khá nhiều điểm giống với reactjs. Cũng nhiều điểm khác và ở những điểm đó khiến mình cảm thấy dễ dàng tiếp cận hơn reactjs. Bootstrap: Một thành phần phổ biến và lý tưởng để xây dựng web gọn, sạch và chuẩn, responsive để hiển thị giao diện trên cả mobile và desktop. Ngoài ra: HTML5, CSS3: không thể thiếu là chuẩn của mọi trình duyệt. JQuery: cung cấp nhiều thực thi với cú pháp được đơn giản hóa so với sử dụng javascript thuần và còn để kết hợp với rất nhiều plugin hữu ích nữa.

Vue.js

Với Vuejs chúng ta có gì? Một framework javascript chỉ để làm một việc duy nhất là xây dựng các thành phần ở phía phía giao diện và không tương tác với bất kỳ một tầng nào khác. Để tương tác với các tầng khác như ajax, lấy data thông qua các rest api thì cần thêm các sự hỗ trợ bên ngoài.

Một ví dụ bắt đầu với VueJs Với dữ liệu nhận được bằng việc gọi một rest api hay là từ một nguồn nào đó thì mình sẽ cho binding vào html đơn giản như thế này:

html:

<div id="app">
    {{ message }}
</div>

Javascripts

var app = new Vue({
 el: '#app',
 data: {
   message: 'Hello Vue!'
 }
})

Các thành phần gồm có, tương ứng giữa HTML và javascripts:

Rất là nhanh chóng binding được data với html. Không đau đầu với những thứ lạ lẫm như jsx, scope… của reactjs, angularjs lạ lẫm với backend developer, các thao tác get set vẫn hơi dài dòng của JQuery và javascript thuần với vuejs. Đối với cách quen thuộc là sử dụng JQuery hoặc javascript thuần thì khi số lượng, cấu trúc dữ liệu trở nên phức tạp và rối rắm, kèm theo đó là 1 mớ html thì code sẽ trở nên hỗn độn, khó kiểm soát và bảo trì hơn rất nhiều.

Ví dụ cho sự hơi rối rắm của html,dữ liệu cần binding và cách làm của vuejs HTML đã mô tả nơi cần binding khi dùng vuejs

<div id="result-container" :class="result.template">
   <div class="content-inside"><h3 class="title">{{result.title}}</h3></div>
   <div class="content-inside">
       <div class="box" v-for="item in result.results">
           <img class="image" :src="item.image" v-if="item.image != null" alt="content photo"/>
           <div class="content">{{item.content}}</div>
       </div>
   </div>
   <img id="content-image" class="img-responsive" :src="'/i/result/' + result.articleId + '/bg.jpg'"
        alt="background image">
   <div class="content"><h4>{{result.content}}</h4></div>
</div>

data

data={
	result : {
	title: ‘title’,
	articleId: 1,
	content: ‘content’,
    template: ‘template’,
    results: [
            { image: ‘image’, content:’content’ },
            { image: ‘image1’, content:’content1’ },
            { image: ‘image2’, content:’content2’ }
        ]
    }
    };

Cách làm của vue. Đương nhiên là có sự kết hợp với những mô tả ở template của html

var vue = new Vue({
   el: '#result-container',
   template: "#template-result-container",
   data: {
       result: data,
   }
});

Chú thích: :class :src là cú pháp kết hợp dấu : và tên của attribute dùng để mô tả binding dữ liệu cho các attribute tương ứng v-for: Dùng để binding dữ liệu kiểu array v-if: Mô tả điều kiện để binding hoặc không. Không được binding tương có nghĩa là thành phần chứa attribute này sẽ không được hiện ra. Các value binding ngoài việc trỏ tới theo cấu trúc của dữ liệu thì có thể kết hợp với javascript để xử lý dữ liệu đầu ra.

Việc sử dụng JQuery hay javascript thuần binding bằng get set thì áp lực từ việc viết đến bảo trì thật không hề nhẹ.

Tìm kiếm một vài plugin JQuery được phát triển và chia sẻ để giải quyết sự hỗn độn này tuy nhiên thử một số gợi ý từ google thì kết quả là chưa ổn định và cũng bị bỏ bê từ lâu. Đã ai thử hết chưa:

Tạm kết

Giải quyết một số vấn đề trước mắt rồi đảo từ trên xuống dưới trang web chính thức của vuejs thì thấy một loạt các chức năng mà vuejs giúp mình giải quyết các vấn đề về giao diện. Cần gì thì xem nấy.

Tham khảo

Web chính thức: bắt đầu với vuejs https://vuejs.org/v2/guide/