AMP准备拥有您的整个前端
Companion demo: Repository | Live app
当我第一次涉足AMP时, 我以为一切都是为了速度和小小的灰色闪电. 我觉得这些目标完全值得实现, 但我团队的其他成员持怀疑态度:AMP不是有限制吗? 它不会阻止JavaScript吗? 你会做CSS吗? 我们的广告呢?? Our branding? 如何使CMS产生amp友好的输出?
我不知道所有这些问题的答案. But the AMP demo 看起来比我们大多数网站都好, 所以我乐观地认为,我们可以在适当的时候跨过这些桥梁. 考虑到通过serp访问我们文章的移动用户的快速页面加载的回报, 我觉得它至少值得拥有一个原型.
事实证明我是对的. The AMP version of our blogs looks similar to the non-AMP version; probably a bit better. 允许使用JavaScript. So is CSS. 广告、表单、分析、性能监控也是如此——我们的AMP版本什么都不需要.
在我的下一个项目中,我产生了一个想法. If nobody minded, 我只是尽快建立整个网站作为一个单一的AMP版本, 而不是“正常”的前端, 与AMP版本配对. 最近AMP团队发布了 一个相当搞笑的视频 这证实了我的怀疑:AMP可以,也许应该,为你的整个前端供电.
我还不能说我有机会在游戏发行的整个过程中执行这种方法, but I intend to, 我将带着同样的信心去做,就像我对待任何其他项目一样. 请允许我反驳一些常见的反对意见.
Design
大多数人都知道AMP可以呈现HTML和CSS的迷人组合, 但是对于某些CSS属性和值不受支持的担忧仍然存在. 我发现事实并非如此. 响应式网页设计 完全支持, 网页字体也是如此, icon fonts, SVG, 整页的背景图片—可能是您习惯使用的任何图片.
CSS
我遇到的第一个障碍是当我试图将我的普通前端CSS加载到AMP中时:CSS有85 kB的限制,而且多年来一直如此, 我们的样式表已经增长到大约270 kB. At first, 我发现这真的很令人沮丧, 但它让我认真考虑实用优先的CSS的优点. Bootstrap和Tailwind就是很好的例子,在这两个例子中,你给一个元素一个类 m-5
(或类似的)而不是写 .thing { margin: 2em; }
在样式表中. 这种方法使我能够仅在42 kB中实现设计奇偶性, 我现在相信这是更好的工作方式, regardless.
JavaScript
AMP确实对可以运行的JavaScript类型设置了一些限制, 以及可以加载它的源文件. 对此,我很感激,因为JavaScript依赖项往往是我的项目中最脆弱的部分. 实际上,你可以在AMP中使用JS做比我预期的更多的事情. AMP为显示/隐藏等常见UI元素提供了有用的模块, AJAX表单提交, validation, 即时内容更新, and more.
还有一个amp-script, 它允许你执行几乎任意的JavaScript, 但范围在开闭之内
tags.
State
人们很容易认为AMP只适用于新闻站点:显然,像数据绑定和JS状态管理这样的现代工具是不受限制的……没错? Wrong! AMP随时准备将DOM交互与全局状态对象绑定,这要归功于AMP -bind. 事实上,AMP项目是 Preact图书馆的第一位白金捐赠人,这表明它只打算增加与领先的JS框架相同的功能.
Scope
AMP能做你在非AMP网站上可能做的所有事情吗? 不,当然不是,从定义上说. 但是更实际地说, 它可以提供你真正关心的90%的功能, 这可能会帮你一个忙,防止你的应用成为它可能使用的任何框架的边缘案例.
AMP作为前端框架:一种令人惊讶的有效方法
它比你通常喜欢的更抽象. 它没有那么灵活. Guess what? 抽象本身并不坏. 灵活性本身并不好. 每个都有一个合适的水平,我相信AMP为大多数项目提供了它.
Plus, 它提供了其他框架无法提供的东西:谷歌的CDN, 它们的SERP预取, 以及他们选择传达的除了吸引人的灰色闪电之外的任何SEO好处. 对任何网站来说都是宝贵的盟友!
Contributors
Scott Fennell
自由前端开发人员
Scott写过数百个WordPress主题和插件. 他专注于第三方API集成,包括Twitter, MailChimp, CloudFlare, Bitbucket, and Shopify. 他是一位经验丰富的演说家, 曾在波特兰的WordCamp和西雅图的谷歌园区做过演讲. 他是一名活跃的技术作家,曾多次在a List Apart和CSS-Tricks上发表文章. 斯科特也是美国陆军的一名前步兵军官.
Show More