[ASP.NET for Beginner] - Part 3 - Front end framework nào?

Posted on Edited on In , Disqus:

In this part 3 we’ll look at the front end frameworks that are popular right now

See the posts in this series

A web app splits into 2 main parts: the Front-end and the Back-end. On the back end there are a billion languages and technologies that can build it. ASP.NET is one of them. And all these technologies / languages serve one ultimate purpose: producing the front end

Meanwhile, there is only one Front end, built from 3 languages: HTML, CSS and Javascript

If you don’t know the basics of HTML, Javascript and CSS yet, go learn them right now

These 3 languages, in my subjective opinion, are like instant noodles. The organization is fairly messy, and the standards get applied differently across different browsers

The HTML standard

HTML has a standard that tells browser developers exactly what to do when rendering HTML’s tags in the browser

To make life less painful, developers around the world have together built extra frameworks and languages supporting these three

1. CSS

1.1. CSS Framework

How do you split a page into flexible columns? How do you make the page show the right components when the browser size changes? How do you make a page readable on a mobile phone?

Dozens of questions like that pop into your head while building some website. To solve that, we have ready-made CSS Frameworks that do this work for you — you just apply them.

1.1.1. Bootstrap

Bootstrap is probably the most used css framework today, with its enormous plugin set + its monstrous treasury of themes

Bootstrap uses a concept called a responsive breakdown, that is, when the browser width hits a certain number of pixels, some HTML components get hidden or shown.

Drawbacks

  • Too popular: this helps during development, but it makes your website…look a lot like a million other websites
  • The grid system uses concrete classes: for each different size you have to add different classes to each column’s html tag
  • Heavy: Bootstrap needs 1 css file, 1 javascript file, and the whole jQuery library + poper.js. What if your website doesn’t use jQuery? Then it’s game over with bootstrap

1.1.2. MaterializeCSS

If you use google’s products, you’ll notice they have a rather nice style, especially when you press a button and a circle ripples out. This is called Material Design

Materializecss follows that design and open sourced it for everyone to use. Fast, light, pretty, well supported, with a big community — those are this framework’s strengths

Drawbacks

  • Too Google: when you use this framework, your website gives users a slightly…google feeling. From the buttons to the grid boxes
  • Not released: believe it or not, even though countless websites are using it, with nearly 32k stars on Github, this framework still hasn’t released version 1.0. Its developers are rushing to fix bugs and polish it for its first release version ;)

1.1.3. The Grid Systems

The most important thing about a framework is the grid system, that is, how the website is split into different columns. Seizing on that, quite a few frameworks were born containing exactly one feature: splitting columns.

Drawbacks

Overall, using this kind of framework means you’re already fairly professional. In that case you’ll have to write the other, non-grid css parts yourself, or find libraries supporting the components you want

1.2. CSS Language Preprocessor

The css language, with its scattered way of organizing things, is a fairly hard challenge for a developer just starting out. Luckily there are languages that replace it

“Replace” isn’t quite right either. These languages just help you write css code that is easier to understand, more methodical, better organized. In the end they still generate a .css file for you to use.

1.2.1. SCSS

SCSS inherits and improves the CSS selector with the {}, : and > constructs. When you start learning it you’ll find its way of selecting an element extremely natural

1.2.2. LESS

Less is like another version of Scss, with fairly similar syntax and the same concepts.

You should pick only one, either SCSS or LESS

2. Javascript

The HTML language, being originally just text with markup and links, only lets you read text and click a link to jump to another page.

Everything changed when javascript was attached. Now you can change a piece of text without reloading, make this icon spin, make that button move, show popups, and so on and so forth.

Javascript has nothing whatsoever to do with Java

2.1. jQuery

jQuery is like a “must-have” library. It makes using dozens of other css frameworks simple and effective.

For example: to change the value of the input tag with id “test” to different text

// Before jquery
document.getElementById("test").value = "Test Value";

// After jquery
$("#test").val("Test Value");

Because it uses CSS Selector concepts, you can pick html elements with jQuery exactly the way you write css for them.

2.2. The trend

Since jQuery is fairly heavy and processing jQuery takes a share of the browser’s resources, there is currently a trend of dropping jQuery entirely.

But the day jQuery disappears is still far off. Computers and phones keep getting more powerful. jQuery is already preloaded on just about any browser you can find

3. HTML

HTML5, as mentioned above, is HTML’s newest version, and every popular browser supports it.

If you write code in Visual Studio, HTML is already well supported. And if you write code in Visual Studio Code, here are a few extensions I use to make writing HTML easier to breathe through

  • Auto Close Tag: automatically closes HTML tags. No more typing them by hand
  • HTML Snippets: suggests the properties of an HTML tag

Which one is best?

There is no concrete answer to this question, so I’ll give my opinion and what I’m using, for reference

CSS: SCSS
CSS Framework: Materializecss
Javascript: jQuery
HTML: HTML5

And you — which one do you pick?