wiki:WebDev0

Basic web-site development

Fundamental principles

  • The big idea: HTML is a structured text.
  • The fundamental principle: structures with BigIdeas/Inheritance inheritance and scoping rules - the basis of everything.
  • Another principle: separation of logic from representation, views from code - the MVC approach.
  • Declarative versus Imperative. Describe what to do, instead of how to do.

Defining a document's structure

The whole point of a HTML document is that it has a [nested] structure, while being a plain-text file. HTML5 tags is the way of defining a structure of a document or a page component (widget).

Leave styling for tomorrow

CSS Selectors is the way to define and modify an appearance. Separate styling from structure and code.

Classification and identification

All elements which belong to the same class (or group) should have appropriate class tag. Multiple class tags, like types, could overlap and complement each other with additional features.

Each stand-alone element (widget or component) should have an unique Id, so it could be referenced easily from CSS and Javascrtipt.

Keep it simple

Define structure of an HTML document (page) with a minimum of necessary elements. Annotate major tags (such as grid divs, tables, widgets) with ids and classes.

Do not over-engineer

Do not start with a popular mega-framework with teens of required tools of dependencies. Start with a basic HTML and CSS and then add some dynamic forms and other widgets when absolutely necessary. It turns out you need very few of them. On a server side start with a simplest tool, like Flask

Tools

There are pipelines, similar to those which we are using with languages that compiles to native code, such as C or C++.

There are static linking (but not exactly) and dynamic linking.

With static linking analogy, the tools will produce a bundle.js file with all your Javascript "compiled", optimized and minified, the way linkers (with LTO) do and bundle.css file with all the styling.

  • cc | ld | strip
  • Babel | Google's Closure compiler | Webpack

With dynamic linking analogy you load (link) whole external "libraries" (Jquery, etc.) from some CDN and call them from your Javascript code.

Because tools are amateurish crowdsourced crap, usually developers use frozen snapshot that works for now.

modular, self-contained, composable components (widgets)

Emacs

git

  • HTML5
  • JQuery
  • Bootstap
  • JQuery-mobile
  • Python3
  • Why not PHP
  • Why not Joomla or Drupal

Tools

Caches

  • memcached, Python3-memcached - for straightforward caching
  • Redis, Python3-redis - an advanced server.

Key-value DBs (hash-tables)

  • leveldb, Python3-leveldb, Python3-plyvel - good-enough for a single-server setups
  • BerkeleyDB, Python3-bsddb3 - a classic DB

SQL databases

  • SQLite, Python3-sqlite - good-enough
  • PostgreSQL, Python3-psycopg2 - the most advanced SQL database.


I am an old-school sysadming and an oldfag, that's why..

We used to serve pages with apache2, and mod_python3. Then it was mod_wsgi. Nowadays it is nginx with uwsgi.

We use an http server to serve TLS/HTTP2 etc and to proxy simple requests to a FastCGI Golang, or uwsgi Python backends. It is possible to just upstream HTTP requests to Golang processes (the most efficient way).

The principal idea is that SSL/TLS/HTTP2 and static content must be served by optimized C code. Do not expose even Golang binaries to the net. We do not even start to talk about wsgi servers.

The most common setups are

  • nginx + uwsgi + Flask
  • nginx + uwsgi + Pyramind
  • nginx + uwsgi + Trac
  • nginx + go net/http/fcgi upstream
  • nginx + go net/http upstream

It a highly optimized setup (even for an interpreted Python code) and it is possible to serve hundreds of request even on a smallest collocation with a qemu/kvm virtual server with golang.

Last modified 2 years ago Last modified on Dec 8, 2018, 3:43:25 PM
Note: See TracWiki for help on using the wiki.