Sevlte has released a new version of the viet-plugin-svelte, full support for vite builds, the amazing TainwindCSS framework, and the famous vite. So based on svelte + tailwindcss + typescript + vite technology stack simulation implementation of a few simple component library Demo, the most intuitive feeling is, really fragrant.

Vite delicious

fast

That’s fast. Feeling that after all these years. Seconds. 2. X version of the speed is much better than 1.x, as a new hand to the official documentation, written in detail, explains why and how to do, to help us better understand the tool itself to solve the problem.

Don’t say much, say more is nonsense, on the document.

Svelte delicious

The Svelte community has recently become active, and its core idea is to “reduce the amount of framework runtime code through static compilation”, meaning that there is no runtime implementation in the browser

  • write less code
  • no virtual dom
  • truly reactive

After playing with the vUE framework for a while, I have some feelings.

Light weight, simple and direct syntax, fast to handle, and vUE is particularly like

Let me give you some common examples

  • There is notemplateIn this case, it doesn’t matter where the script is placed before or after the DOM
<script> let name = 'world'; </script> <h1>Hello {name}! </h1>Copy the code
  • Components are nested and do not need to display a declaration similar to vUE components references
<script> import Nested from './HelloWorld.svelte'; </script> <style> p { color: purple; font-family: 'Comic Sans MS', cursive; font-size: 2em; } </style> <p>These styles... </p> <HelloWorld/>Copy the code
  • Reactive, event handling, use arrow functions if arguments are passed in an event
<script>
  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
Copy the code

Passing a parameter is similar to

on:click={() => handleClick('HOME')}
Copy the code
  • Props design, exporting declarations directly on child components
// Parent component <script> import Nested from './ nested.svelte '; </script> <Nested answer={42}/> <Nested/> // subcomponents nested. svelte <script> export let answer= 'a mystery'; </script> <p>The answer is {answer}</p>Copy the code
  • Odd if/else logic judgment (not easy to use, long to write)
<script>
  let x = 7;
</script>

{#if x > 10}
  <p>{x} is greater than 10</p>
{:else if 5 > x}
  <p>{x} is less than 5</p>
{:else}
  <p>{x} is between 5 and 10</p>
{/if}
Copy the code
  • For more, see the tutorial

Provides a codeMirror based REPL tutorial

Tutorial complete, learning is very convenient, this is better than vue do, basically read the code to know how to use, efficient

At the same time, there are some things I don’t like

How do you pronounce this word, it always sounds like servlet

Forgive me for my small vocabulary and turn to Baidu translation for help

The suffix is surprisingly long

When creating new files, there is always a long. Svelte suffix, which would be more popular if it could be simplified, such as. Se, sve, ste, sle, etc. Perhaps have what better simple and quick processing way, hope to have the friend that is familiar with it to help answer.

Lack of strong community support

This is particularly important because there are many missing links, and when problems occur, it is relatively difficult to solve them.

There is no router out of the box. Github has tried several of them and is not happy with them. Syntax usage is out of sync with the mainstream community, there are cognitive learning costs, and support is low. Failed to solve the router problem, too.

In addition, there are some other questions, for example, the problem of bidirectional binding. If the value of the child component changes, the parent component can be told, so whether it is synchronized by the parent to the child according to one-way data flow, or the child component can also be modified.

At the same time, remain skeptical of the ability to support large complex interactive systems. Supporting static web pages and displaying simple interactions is good, plus TailwindCSS is especially good for building teams with minimal content such as static host sites, campaign pages, component library sample displays, etc.

TailwindCSS delicious

Again, the CSS framework enhances utility classes and uses atomic classes to write styles.

Quick start, direct class

NPM install, and then you can be happy to introduce it

Detailed documentation

The documentation is great, very detailed, concept introduction, quick to get started, product optimization, browser support, etc., very detailed description of everything about the framework. The existence of a textbook edition is used as a tool manual.

Quick search, Command + K (algolia support, same as vue3 official documentation)

As you get started, you encounter styles that are not supported by default, such as height: It was originally defined directly under theme, but the result was overwriting all of the default heights. As you can see from the documentation, extend can be configured to accommodate the default rules.

Tailwind.config.js configuration example

const production = process.env.NODE_ENV === 'production'; module.exports = { darkMode: 'media', future: { purgeLayersByDefault: true, removeDeprecatedGapUtilities: true, }, plugins: [], purge: { enabled: production, content: [ './src/**/*.svelte' ] }, theme: { extend: { minHeight: {' 480 ', '480 px'}, maxWidth: {' 320 ', '45 rem'}, spacing: {' 10.5 ':' 42 px '}}}};Copy the code

The design is very standard

If you are not familiar with CSS and don’t know how to divide CSS content, it is recommended to look at the left side of the document directory structure and think about CSS from another dimension.

Layout
Flexbox
Grid
Box Alignment
Spacing
Sizing
Typography
Background
Border
Filter
Table
Transition and Animation
Transform
Interactivity
SVG
Accessibility
Copy the code

The CSS division is very detailed, the most cool is, the coding process, directly lose style, focus on DOM structure and logic processing.

The output file is so small

Index.9c7de276. CSS is only 7.20 KB, which is small enough

Of course, there are some that are not so cool.

You need to learn naming rules

Take a look at the use of line-height and familiarize yourself with the relationship

Reduce code readability

A style restore must write many atomic classes, otherwise it is no different from using the class collection directly. Take 404 processing logic pages as an example, when the class becomes very long, the DOM structure begins to become chaotic, the code readability greatly reduced, read too much of this code, will vomit.

<div class="flex justify-center items-center h-full not-found overflow-hidden"> {#if showImg} <picture> <img Class ="max-w-320" SRC ={source} Alt =" /> </picture> {:else} <div class="not-found-text p-10 w-full h-full flex-center flex-col"> <p class="not-1 text-8xl text-gray-200">404</p> <p class="text-2xl text-gray-300 italic">Whoops! This page does not exist.</p> <p class="text-base text-gray-400 italic">Try a link below to help you find your way.</p> <div class="mt-10"> <button class="w-32 btn-blue mr-8" on:click={() => handleClick('HOME')}>HOME</button> <button class="w-32 btn-blue" on:click={handleGithub}>GITHUB</button> </div> </div> {/if} </div>Copy the code

Dependency on plug-ins

Not all CSS attributes are supported by the tailwindCSs-text-indent framework by default. For example, text-indent relies on tailwindCSs-text-indent. Of course, we can use the @Layer Utilities definition. But if everything has to be defined again, why not just write CSS?

@layer utilities { .text-indent-0 { text-indent: 0px } .text-indent-1 { text-indent: 0.25rem}. Text-indent -2 {text-indent: 0.25rem}. Text-indent -3 {text-indent: 0.25rem}. Text-indent -4 {text-indent: 0.25rem}. 1rem}. Text-indent -5 {text-indent: 1.25rem}}Copy the code

If you do not write for a long time, you will forget the rules, but CSS will not

This is a matter of opinion. May not be familiar with the use of CSS, not as often written, it is no wonder not to remember.

We can effectively use tools to solve problems and increase productivity.

Tailwind CSS IntelliSense

Can we also learn how to design web pages that cover most of our common UI designs

Typescript delicious

If you don’t already know typescript, learn it.

conclusion

The full text is an attempt to summarize the shallow of the strange technology stack, if there is not too rigorous or incorrect conclusions, welcome to help point out.

The Internet is moving so fast that we have to embrace it and love it to keep up. We have to read more, do more hands-on work, find something that interests us, participate in open source projects, participate in community events, and see what people are doing.

Love the front end.

Embrace open source and give back.

The resources

  1. Lot code
  2. Svelte framework
  3. What about svelte
  4. How to evaluate TailwindCSS
  5. Possible problems with TailwindCSS
  6. TailwindCSS website