现代 web 开发的痛点:从只是展示静态的页面,到富交互的 web app
障碍:网页元素重绘延迟/网络请求延迟/交互的响应延迟
带来的复杂状态维护
重点:让一切变成更及时、同步、可交互
Gone with the wind |
DROP TABLE IF EXISTS `workers`; | |
CREATE TABLE `workers` ( | |
`id` int(11) NOT NULL AUTO_INCREMENT, | |
`name` varchar(20) NOT NULL, | |
`sex` enum('F','M','S'), | |
`salary` int(11) DEFAULT '0', | |
`email` varchar(30), | |
`EmployedDates` date, | |
`department` varchar(30), | |
PRIMARY KEY (`id`) |
Asynchrony: Under the Hood - Shelley Vohr - JSConf EU 2018 | |
event loop | |
micro task / macro task (setTimeout Promise nextTick) | |
本质:callback,单一事件 | |
Promise -> generator -> async/await | |
Reactive | |
响应的、离散的、惰性的、纯函数的 |
Questions:
你好,我是豆瓣阅读前端负责人马申彦,现在负责豆瓣阅读 web 前端的开发与维护,包括一个完整的 web 版电子书店、App 内嵌页面、原创作品的写作发布及后台审稿相关功能,日常运营相关活动与比赛等,阅读工程团队内前端组共 3 人,整个技术团队不超过 15 人,继承了豆瓣优良的技术氛围同时具有自主创新的产品方法。
用户交互与前端关系密切,影响用户体验的要素很多,简单来说分为页面加载与后续交互两部分,页面加载方面又分为 App 内嵌页面、传统服务器渲染页面和 SPA 页面等,这里面加载的体验效果是从前往后递减,App 内嵌页面直接打包在 App 内无需加载页面,只需要载入数据,但这需要和 App 通讯获取数据,所以开发时需要与客户端配合定义相关数据;服务器渲染页面一般适合纯展示的需求,特点是加载快但基本没有后续交互了;SPA 页面是前端自主控制数据的获取与存储等,可以有更多的交互操作,但缺点是 js 文件加载会导致出首屏慢,这时就需要通过 webpack 等进行分包或进行异步加载以提升载入速度。页面载入后的交互上一般会考虑以下几种情况:
User: m187***
https://read.douban.com/rally/2/
User: 171851***
https://read.douban.com/rally/2/judge/153600423/
#enables colorin the terminal bash shell export | |
export CLICOLOR=1 | |
#sets up thecolor scheme for list export | |
export LSCOLORS=gxfxcxdxbxegedabagacad | |
#sets up theprompt color (currently a green similar to linux terminal) |
import 'reflect-metadata'; | |
abstract class Singleton { | |
static getInstance: () => Singleton; | |
} | |
const INJECTION_KEY = 'inject:'; | |
const inject = | |
(kls: typeof Singleton): PropertyDecorator => |
// https://regex101.com/r/30Xvde/1 | |
const fs = require('fs') | |
const VAR_REG = /(?:@extend\s.\\@|&:extend\(\.\\@|@extend\s.\\\$)([^\;\r\n\t\s\)]+)/gm; | |
const sassInput = fs.readFileSync('style/style.scss', 'utf-8'); | |
const lessInput = fs.readFileSync('style/style.less', 'utf-8'); | |
const stylusInput = fs.readFileSync('style/style.styl', 'utf-8'); |
GitHub Copilot | |
Welcome, @msyfls123, I'm your Copilot and I'm here to help you get things done faster. You can also start an inline chat session. | |
I'm powered by AI, so surprises and mistakes are possible. Make sure to verify any generated code or suggestions, and share feedback so that we can learn and improve. Check out the Copilot documentation to learn more. | |
msyfls123: tell me how to use next.js connect to sqlite3 | |
GitHub Copilot: To connect Next.js with SQLite3, you can use the `sqlite3` package. Here's a step-by-step guide: | |
1. Install the `sqlite3` package using npm or yarn: |