JavaScript

JavaScript是在浏览器里执行的脚本语言。

为什么JavaScript必须?

JavaScript在客户端浏览器能实现HTML和CSS无法实现的动态功能。;每一个现代Python应用都会在前端使用JavaScript。

前端框架

JavaScript资源

  • Frontend tooling in 2015 shows the results of a survey for what frontend developers are using for CSS pre- and post-processing and other build steps.
  • How Browsers Work is a great overview of both JavaScript and CSS as well as how pages are rendered in a browser.
  • A re-introduction to JavaScript by Mozilla walks through the basic syntax and operators.
  • Coding tools and JavaScript libraries is a huge list by Smashing Magazine with explanations for each tool and library for working with JavaScript.
  • Superhero.js is an incredibly well designed list of resources for how to test, organize, understand and generally work with JavaScript.
  • Unheap is an amazing collection of reusable JQuery plugins for everything from navigation to displaying media.
  • The State of JavaScript in 2015 is an opinion piece about favoring small, single-purpose JavaScript libraries over larger frameworks due to churn in the ecosystem.
  • The Modern JavaScript Developer’s Toolbox provides a high-level overview of tools frequently used on the client and server side for developers using JavaScript in their web applications.

JavaScript学习清单

  1. Create a simple HTML file with basic elements in it. Use the python -m SimpleHTTPServer command to serve it up. Create a <script type="text/javascript"></script> element at the end of the <body> section in the HTML page. Play with JavaScript within that element to learn the basic syntax.
  2. Download JQuery and add it to the page above your JavaScript element. Start working with JQuery and learning how it makes basic JavaScript easier.
  3. Work with JavaScript on the page. Incorporate examples from open source projects listed below as well as JQuery plugins. Check out Unheap to find a large collection of categorized JQuery plugins.
  4. Check out the JavaScript resources below to learn more about advanced concepts and open source libraries.
  5. Integrate JavaScript into your web application and check the static content section for how to host the JavaScript files.

Cascading Style Sheets (CSS)

CSS文件告诉浏览器如何显示HTML文件。

为什么CSS必须?

CSS把HTML文件的内容和展示分离出来,并且让你可以重用这些展示方式。

CSS文件如何从服务器获取?

HTML文件一般包含了渲染其展现方式的CSS文件。浏览器获取到CSS文件后会渲染HTML文件的展现方式。

Google Chrome Web Developer Tools shows how CSS is separate from the HTML content.

 

View source screenshot for the fsp.css file in index.html.

CSS预处理器 preprocessors

CSS预处理器把一种语言编辑成CSS代码,让网页设计师能够书写可维护的前端代码:

  • Sass 是流行的预处理器,也被认为是最强大的预处理器。
  • LESS 是另一种预处理器,因为Bootstrap Framework 采用LESS,带动LESS快速流行。
  • Stylus 被认为是第三大流行的CSS预处理器。

CSS预处理器资源

  • The Advanced Guide to HTML and CSS book has a well-written chapter on preprocessors.
  • Sass vs LESS provides a short answer on which framework to use then a longer more detailed response for those interested in understanding the details.
  • How to choose the right CSS preprocessor has a comparison of Sass, LESS and Stylus.
  • Musings on CSS preprocessors contains helpful advice ranging from how to work with preprocessors in a team environment to what apps you can use to aid your workflow.

CSS框架

CSS资源

CSS学习清单

  1. Create a simple HTML file with basic elements in it. Use the python -m SimpleHTTPServer command to serve it up. Create a <style></style> element within the <head> section in the HTML markup. Play with CSS within that style element to change the look and feel of the page.
  2. Check out front end frameworks such as Bootstrap and Foundation and integrate one of those into the HTML page.
  3. Work through the framework’s grid system, styling options and customization so you get comfortable with how to use the framework.
  4. Apply the framework to your web application and tweak the design until you have something that looks much better than generic HTML.

Web设计

主要用JavaScript和CSS实现web设计。

Why is web design important?

下面的网页,太简单了点吧?

HTML with no CSS or JavaScript.

 

响应式设计

把web的内容和展示分离出来,根据不同的屏幕展示不同的内容,被称为响应式设计responsive design。相应是通过CSS里面的media queries实现。

比如,一个移动设备没有足够空间展示导航栏,Bootstrap Blog example 显示导航栏在不同页面尺寸下的变化。

Web设计资源

  • Frontend Guidelines is an amazing write up of good practices for HTML, CSS and JS.
  • How I Work with Color is a fantastic article from a professional designer on how he thinks about color and uses it for certain effects in his designs.
  • The Bootstrapping Design book is one of the clearest and concise resources for learning design that I’ve ever read. Highly recommended especially if you feel you have no design skills but need to learn them.
  • Learn Design Principles is a well thought out clear explanation for how to think about design according to specific rules such as axis, symmetry, hierarchy and rhythm.
  • Kuler is a complementary color picker by Adobe that helps choose colors for your designs.
  • If you want to learn more about how browsers work behind the scenes, here’s a blog post series on building a browser engine that will show you how to build a simple rendering engine.

Django模板

Django框架自带了它自己的模板引擎。

Django web framework logo. Trademark Django Software Foundation.

项目模板和Django模板有什么区别?

一个项目模板包含了创建一个新的web项目的文件和代码。比如,当你运行django-admin.py startproject abc时,Django admin 脚本命令创建了一个新的abc 目录和数个Python配置文件。Django模板是存在于一个项目内部,被开发者编辑,用来生成HTML等输出的。

Mako

Mako是一个Python语言内置的模板引擎。

Mako template engine logo.

Mako资源

  • Exploring Mako explains a bit about the template engines Myghty and Mason, which influenced Mako’s design. The post then shows a few basic examples for how to use Mako.
  • Configuration Templates with Python and Mako shows some basic situations for how to use Mako in an example project.
  • The Pylons’ project documentation on templates provides many examples for using Mako, which is the default template language for the Pylons web framework.
  • Flask-Mako is a Flask extension that makes it easier to use Mako as the template engine in your Flask web app projects.
  • The Stack Overflow question on What is the fastest template system for Python? provides some basic benchmarks comparing Mako, Jinja and other template engines. Any benchmark should be taken as a data point rather than a rule on which engine is actually the fastest in real world scenarios. In addition, if you are using Mako or any other template engine as part of a static website generator then it will not really matter which one is the fastest because the output is created before the website is deployed rather than during the web server‘s HTTP request-response cycle.

Jinja2

Jinja,又常称为”Jinja2” ,是一种Python模板引擎,根据用户的HTTP请求生成HTML,XML 或其他格式输出。

Logo for the Jinja template engine project.

为什么Jinja2有用?

Jinja2 有一套清晰的模板标记语法,并能作为其他应用使用,参见an independent open source project

Jinja2起源和发展

Jinja2 首发于2008 版本号 2.0rc1。自那起经过多次升级和开发。Jinja2不是第一个模板引擎,实际上它受到Django内置模板引擎的启发,有很多模板引擎比如JavaServer Pages (JSPs),比Jinja2早了近10年。

哪些项目依赖Jinja2?

Jinja2 被广泛用作web框架比如Flask, Bottle, Morepath的模板引擎。Jinja2 也被用作配置管理工具比如Ansible和静态网站生成器Pelican的模板引擎。

Jinja2资源

模板引擎 Template Engines

模板引擎通过标识符生成字符输出,常用来输出HTML,XML 或 PDF。

为什么模板引擎重要?

模板引擎可以格式化的生成输出文件。比如,这个HTML文件的前10行:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Matt Makai">
  <meta name="description" content="Template engines provide programmatic output of formatted content such as HTML, XML or PDF.">
  <link rel="shortcut icon" href="//static.fullstackpython.com/fsp-fav.png">

基本上每个HTML文件的前10行都是如此。

下面代码演示如何从 base.html 模板生产代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Matt Makai">
  {% block meta_header %}{% endblock %}
  <link rel="shortcut icon" href="//static.fullstackpython.com/fsp-fav.png">

In a typical WSGI application, the template engine would generate the HTML output response when an HTTP request comes in for a particular URL.

Python模板引擎

有多种流行的Python模板引擎。

Spectrum between no logic in templates and the ability to run arbitrary code.

Jinja (Jinja2)

Jinja,又称为 “Jinja2″,是一个流行的开源的Python模板引擎。有些模板引擎,比如Django templates 作为大型框架的一部分,很难在其他项目中被重用。

多数Python开源项目比如configuration management 工具Ansible and SaltStack 以及static site generator Pelican都使用Jinja作为默认模板引擎。

Django模板

Django自带模板引擎template engine(Django 1.9)取代其他模板引擎比如Jinja。

Mako

Mako 是另一个常用的模板引擎。

其他Python模板引擎

模板引擎执行对比

模板引擎资源

其他Web框架

除了Django, Flask, Pyramid and Bottle之外,Python还有很多web框架。

TurboGears

TurboGears, born as a full stack layer on top of Pylons, is now a standalone web framework that can act both as a full stack library (like Django) or as a micro framework.

TurboGears logo.

Falcon

Falcon is a minimalist web framework designed with web application speed as a top priority.

web.py

web.py is a Python web framework designed for simplicity in building web applications.

web2py

Web2py is a batteries-included philosophy framework with project structure based on model-view-controller patterns.

CherryPy

CherryPy is billed as a minimalist web framework, from the perspective of the amount of code needed to write a web application using the framework. The project has a long history and made a major transition between the second and third release.

Muffin

Muffin is a web framework built on top of the asyncio module in the Python 3.4+ standard library. Muffin takes inspiration from Flask with URL routes defined as decorators upon view functions. The Peewee ORM is used instead of the more common SQLAlchemy ORM.

Other web framework resources

其他框架学习清单

  1. 阅读本节,以及它们对应的官网
  2. 你应该知道除了Django和Flask之外还有其他框架。但是不一定需要去学习它们。精通一个比如Django就够了,其他的有时间有兴趣再去学习。

Sanic

Sanic 是构建于uvloop 的Python web 框架,设计目标是实现通过异步请求处理实现快速HTTP相应。

Sanic web framework logo.

什么时候使用Sanic?

Sanic不能在Windows上开发和部署,因为它依赖于uvloop

有一个讨论关于,an excellent discussion on the /r/python subreddit 使用新式的异步框架比如Sanic或Japronto,对比传统框架比如Django。采用一个新框架的主要权衡是,生态是否丰富,是否有丰富的资源可用,还是很多工作要自己从头做起。

Sanic教程

Sanic开发非常或者但是仍然相当早期:

Morepath

Morepath 是一种基于模型驱动的微框架。

Morepath的哲学是数据模型应该通过web框架驱动驱动开发。默认情况下把URL直接路由到模型,而不像Django要求把URL路由给开发者。

为什么Morepath是一种有趣的web框架?

Simple CRUD web applications and APIs can be tedious to build when they are driven straight from data models without much logic between the model and the view. Learn more about how Morepath compares with other web frameworks from the creator.

With the rise of front end JavaScript frameworks, many Python web frameworks are first being used to build RESTful APIs that return JSON instead rendering HTML via a templating system. Morepath appears to have been created with the RESTful API model approach in mind and cuts out the assumption that templates will drive the user interface.

Morepath is an implementation of the web frameworks concept. Learn how these parts fit together in the web development chapter or view all topics.

Morepath资源

Morepath, with its first commit using the Morepath name in 2013, is a much newer web framework than Django, Flask or Pyramid, which results in fewer tutorials. There is also a lot of opportunity for newer Python developers to fill the gaps with their own Morepath tutorials. However, these resources below are a good place to get started.