使用纯JavaScript打造的Hacker News示例应用

在线预览

这个开源项目是一个基于原生JavaScript（不依赖任何框架）构建的渐进式Web应用程序（PWA），仅利用Webpack进行打包和Service Worker来实现离线缓存。开发者在Transylvania的Cluj-Napoca用心创造出了这个项目，旨在展示不使用框架也能高效地构建应用。


安装步骤

1. 克隆仓库
2. 运行npm install
3. 运行npm run dev，本地服务器将启动并实时监控文件变化

项目详情

该实验项目旨在测试原生JavaScript能否在PWA性能上与现有框架相媲美。目前进展顺利，待完成后，将分享性能评估报告以供参考。为了提高速度，项目中实施了一些优化措施：

基于组件的组合

受React启发，我们将视图呈现的重点放在JavaScript中，让开发者专注于具体任务。一个组件的实现方式如下：

import { div, a } from '../core/dom-api';

export const myCustomNavigation = (props) => {
    return div(
        { className: 'my-custom-navigation' },
        [
            a({ href: '/' }, '首页'),
            a({ href: '/关于' }, '关于我们'),
            a({ href: '/联系' }, '联系我们')
        ]
    )
};

代码结构清晰，类似React或Preact，但完全依赖原生DOM API。在./core/dom-api.js中，你可以看到所有操作都被分解，只有一个createElement函数用于创建组件。

欢迎反馈！

我们非常期待你的建议和问题，欢迎提交Issue或者直接联系。谢谢你的关注！

---

这个项目不仅展示了原生JavaScript的潜力，还为那些想要摆脱框架束缚的开发者提供了一种新的构建PWA的方式。无论你是初学者还是经验丰富的开发者，都能从中受益匪浅。来试试看，体验一下纯JavaScript的魅力吧！