Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

🌍 Programming language learning platform for developers. Master new languages through comparison learning. Interactive editor, performance monitoring, multi-language support.

Notifications You must be signed in to change notification settings

erweixin/langshift.dev

Open more actions menu

Repository files navigation

🌍 LangShift.dev - 多语言学习平台

专为开发者设计的编程语言转换学习平台,通过对比学习快速掌握新语言

English | 中文

Next.js React TypeScript Fumadocs License PRs Welcome

📖 项目简介

LangShift.dev 是一个专门为开发者设计的编程语言转换学习平台。通过对比不同编程语言的语法特性和概念映射,帮助你快速理解新语言的核心概念,并能够将其应用到实际项目中。

我们的核心理念是:通过已知语言理解未知语言,让学习新编程语言变得简单高效。

💡 智能辅助学习: 本项目运用 AI 技术生成丰富的学习内容,并经过审核优化,为你提供高效的学习体验。建议结合官方文档一起学习,获得最佳效果!如有改进建议,欢迎通过 GitHub Issues 分享。

🎯 学习目标

  • 通过语言对比快速掌握新编程语言
  • 理解不同语言的语法特性和设计哲学
  • 构建多语言开发能力
  • 学会在不同语言间迁移开发思维
  • 掌握现代开发工具和最佳实践

🌐 支持的语言转换

🔄 JavaScript ↔ Python ✅ (已完成)

  • 从 JavaScript 开发者视角学习 Python
  • 语法映射:变量、函数、类、异步编程
  • 生态系统对比:npm vs pip、Node.js vs Python
  • 实战项目:Web 开发、数据处理、自动化脚本
  • 高级特性:类型注解、装饰器、上下文管理器
  • 包含 13 个完整学习模块

📚 查看详细学习指南 →

🔄 JavaScript ↔ Rust ✅ (已完成)

  • 从 JavaScript 开发者视角学习 Rust
  • 内存管理:垃圾回收 vs 所有权系统
  • 类型系统:动态类型 vs 静态类型
  • 性能优化:解释执行 vs 编译优化
  • 并发编程:事件循环 vs 零成本抽象
  • 包含 14 个完整学习模块

📚 查看详细学习指南 →

🔄 JavaScript ↔ Go ✅ (已完成)

  • 从 JavaScript 开发者视角学习 Go
  • 并发编程:事件循环 vs Goroutines
  • 类型系统:动态类型 vs 静态类型
  • 包管理:npm vs Go Modules
  • 错误处理:异常 vs 显式错误返回
  • 包含 14 个完整学习模块

📚 查看详细学习指南 →

🔄 JavaScript ↔ Kotlin ✅ (已完成)

  • 从 JavaScript 开发者视角学习 Kotlin
  • 协程编程:Promise/async-await vs Kotlin 协程
  • Android 开发:移动应用开发基础
  • JVM 生态系统:Spring Boot 和后端服务
  • 函数式编程:高阶函数和 Lambda 表达式
  • 包含 14 个完整学习模块

📚 查看详细学习指南 →

🔄 JavaScript ↔ C++ ✅ (已完成)

  • 从 JavaScript 开发者视角学习 C++
  • 内存管理:垃圾回收 vs 手动管理
  • 面向对象:原型链 vs 类继承
  • 性能优化:解释执行 vs 编译优化
  • 模板编程:动态类型 vs 泛型
  • 包含 15 个学习模块

📚 查看详细学习指南 →

🔄 JavaScript ↔ Swift 🚧 (开发中)

  • 从 JavaScript 开发者视角学习 Swift
  • 类型系统:动态类型 vs 强类型
  • 内存管理:垃圾回收 vs ARC
  • 函数式编程:高阶函数 vs 闭包
  • 移动开发:Web vs iOS/macOS
  • 包含 15 个学习模块 (部分模块已完成)

📚 查看详细学习指南 →

🔄 JavaScript ↔ C ✅ (已完成)

  • 从 JavaScript 开发者视角学习 C 语言
  • 内存管理:垃圾回收 vs 手动内存管理
  • 指针操作:引用 vs 指针
  • 系统编程:高级抽象 vs 底层控制
  • 性能优化:解释执行 vs 编译优化
  • 包含 15 个学习模块

📚 查看详细学习指南 →

🚀 更多语言支持计划中...

  • JavaScript ↔ Java (计划中)
  • Python ↔ Rust
  • JavaScript ↔ Dart
  • Python ↔ TypeScript

📚 学习模块概览

JavaScript → Python (已完成)

  • 模块 0: Python 介绍与学习方法
  • 模块 1: 基础语法对比
  • 模块 2: 模块系统与包管理
  • 模块 3: 面向对象与函数式编程
  • 模块 4: 异步编程
  • 模块 5: 代码质量、测试与类型注解
  • 模块 6: Web 开发
  • 模块 7: 数据处理与自动化
  • 模块 8: 综合实战项目
  • 模块 9: 高级主题
  • 模块 10: 常见陷阱与解决方案
  • 模块 11: Pythonic 代码风格
  • 模块 12: 类型注解详解

JavaScript → Rust (已完成)

  • 模块 0: Rust 初识与环境搭建
  • 模块 1: 核心语法与结构对比
  • 模块 2: 模块系统与构建工具
  • 模块 3: 所有权与内存模型
  • 模块 4: 并发与异步模型
  • 模块 5: 类型系统与特征(Traits)
  • 模块 6: 错误处理与类型安全
  • 模块 7: Web 开发实战
  • 模块 8: 系统级编程与高级主题
  • 模块 9: 实战项目驱动
  • 模块 10: 常见陷阱与调试指南
  • 模块 11: Idiomatic Rust 风格
  • 模块 12: 高级 Rust 特性
  • 模块 13: 性能优化与最佳实践

JavaScript → Go (已完成)

  • 模块 0: Go 介绍与学习方法
  • 模块 1: 基础语法对比
  • 模块 2: 包系统与模块管理
  • 模块 3: 类型系统与接口
  • 模块 4: 并发编程与 Goroutines
  • 模块 5: Channel 与 Select 语句
  • 模块 6: 错误处理机制
  • 模块 7: Web 开发实战
  • 模块 8: 微服务架构
  • 模块 9: 云原生开发
  • 模块 10: 测试与调试
  • 模块 11: 综合实战项目
  • 模块 12: 常见陷阱与解决方案
  • 模块 13: Idiomatic Go 风格

JavaScript → Kotlin (已完成)

  • 模块 0: Kotlin 介绍与 JVM 生态系统
  • 模块 1: 基础语法对比
  • 模块 2: JVM 生态系统与工具链
  • 模块 3: 函数式编程特性
  • 模块 4: 协程与异步编程
  • 模块 5: 面向对象编程
  • 模块 6: Android 开发基础
  • 模块 7: Web 开发与 Spring Boot
  • 模块 8: 移动应用开发
  • 模块 9: 跨平台开发
  • 模块 10: 测试与调试
  • 模块 11: 综合实战项目
  • 模块 12: 常见陷阱与解决方案
  • 模块 13: Idiomatic Kotlin 风格

JavaScript → C++ (已完成)

  • 模块 0: C++ 介绍与学习方法
  • 模块 1: 基础语法对比
  • 模块 2: 内存管理基础
  • 模块 3: 指针与引用
  • 模块 4: 面向对象编程基础
  • 模块 5: 模板与泛型编程
  • 模块 6: STL 容器
  • 模块 7: STL 算法
  • 模块 8: 错误处理机制
  • 模块 9: 智能指针
  • 模块 10: 性能优化
  • 模块 11: 现代 C++ 特性
  • 模块 12: 并发与多线程
  • 模块 13: 系统编程
  • 模块 14: 综合实战项目

JavaScript → Swift (已完成)

  • 模块 0: Swift 介绍与学习方法
  • 模块 1: 基础语法对比
  • 模块 2: 类型系统与安全
  • 模块 3: 函数式编程特性
  • 模块 4: 面向对象编程
  • 模块 5: 协议与扩展
  • 模块 6: 错误处理
  • 模块 7: 并发编程
  • 模块 8: iOS/macOS 开发
  • 模块 9: SwiftUI 框架
  • 模块 10: 网络编程
  • 模块 11: 数据持久化
  • 模块 12: 性能优化
  • 模块 13: 测试与调试
  • 模块 14: 综合实战项目

JavaScript → C (已完成)

  • 模块 0: C 语言介绍与学习方法
  • 模块 1: 基础语法对比
  • 模块 2: 变量与内存基础
  • 模块 3: 指针基础概念
  • 模块 4: 数组与字符串处理
  • 模块 5: 函数与栈管理
  • 模块 6: 结构体与联合体
  • 模块 7: 动态内存分配
  • 模块 8: 文件操作与 I/O
  • 模块 9: 算法与数据结构
  • 模块 10: 系统编程基础
  • 模块 11: 综合实战项目
  • 模块 12: 常见陷阱与调试
  • 模块 13: 性能优化与最佳实践
  • 模块 14: 高级主题与扩展

详细的学习内容请查看各模块的专门文档。

🛠️ 技术栈

平台技术

  • 框架: Next.js 15.5.7 (App Router)
  • 文档: Fumadocs 15.6.1 + MDX
  • 样式: Tailwind CSS 4.0.9
  • 代码编辑器: Monaco Editor 4.7.0 + Pyodide
  • 国际化: 支持中英文繁体中文
  • 搜索: Orama 3.1.1 全文搜索

语言运行时

  • Python: Pyodide (浏览器端 Python)
  • JavaScript: V8 Engine
  • Kotlin: JVM (计划支持 Kotlin/JS)
  • Rust: WebAssembly (计划中)

开发工具

  • 类型检查: TypeScript 5.8.2
  • 代码质量: ESLint 9.30.1, Prettier 3.5.3
  • 构建优化: Turbopack
  • 性能监控: 内置性能监控组件

特色功能

  • 交互式代码编辑器: 支持多语言语法高亮和实时执行
  • 代码对比模式: 并排显示不同语言的实现
  • 性能监控: 实时监控代码执行性能
  • 虚拟化编辑器: 优化大量代码的渲染性能
  • 滚动编码: 交互式代码演示
  • SEO 优化: 结构化数据和搜索引擎优化

🚀 快速开始

环境要求

  • Node.js 18+
  • pnpm (推荐包管理器)
  • 现代浏览器 (支持 WebAssembly)

安装步骤

  1. 克隆项目

    git clone https://github.com/erweixin/langshift.dev.git
    cd langshift.dev
  2. 安装依赖

    pnpm install
  3. 启动开发服务器

    pnpm dev
  4. 访问项目 打开浏览器访问 http://localhost:8000

开发命令

# 开发模式 (使用 Turbopack)
pnpm dev

# 构建生产版本
pnpm build

# 启动生产服务器
pnpm start

# 代码检查
pnpm lint

# 类型检查
pnpm type-check

# SEO 检查
pnpm seo-check

# 构建分析
pnpm analyze

📁 项目结构

langshift.dev/
├── app/                    # Next.js App Router
│   └── [lang]/            # 国际化路由
│       ├── (home)/        # 首页
│       ├── docs/          # 文档页面
│       ├── intro/         # 介绍页面
│       └── layout.tsx     # 布局组件
├── components/            # React 组件
│   ├── python-editor.tsx  # Python 代码编辑器
│   ├── virtualized-editor.tsx # 虚拟化编辑器
│   ├── side-by-side-code.tsx # 对比代码组件
│   ├── scrollycoding.tsx # 滚动编码组件
│   ├── monaco-manager.tsx # Monaco 编辑器管理
│   ├── editor-performance-monitor.tsx # 性能监控
│   ├── interactive-code-comparison.tsx # 交互式代码对比
│   ├── seo-head.tsx      # SEO 头部组件
│   ├── seo-doc-page.tsx  # 文档页面 SEO
│   ├── analytics.tsx     # 分析组件
│   ├── annotations/      # 注释组件
│   └── ui/              # UI 组件库
├── content/              # 文档内容
│   └── docs/            # 文档目录
│       ├── js2py/       # JavaScript → Python (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 13个学习模块
│       ├── js2rust/     # JavaScript → Rust (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 14个学习模块
│       ├── js2go/       # JavaScript → Go (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 14个学习模块
│       ├── js2cpp/      # JavaScript → C++ (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 15个学习模块
│       ├── js2swift/    # JavaScript → Swift (开发中 - 部分完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 15个学习模块
│       ├── js2c/        # JavaScript → C (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 15个学习模块
│       ├── js2kotlin/   # JavaScript → Kotlin (已完成)
│       │   ├── README.md # 模块介绍
│       │   ├── .cursorrules # 模块规范
│       │   └── module-*.mdx # 14个学习模块
│       ├── js2java/     # JavaScript → Java (计划中)
│       └── ...
├── lib/                 # 工具函数
│   ├── i18n.ts         # 国际化配置
│   ├── seo-structured-data.ts # SEO 结构化数据
│   ├── source.ts       # 源码配置
│   └── utils.ts        # 工具函数
├── messages/           # 国际化消息
│   ├── en.json        # 英文
│   ├── zh-cn.json     # 简体中文
│   └── zh-tw.json     # 繁体中文
├── styles/            # 样式文件
├── middleware.ts      # 中间件配置
├── next.config.mjs   # Next.js 配置
├── source.config.ts  # Fumadocs 配置
├── tsconfig.json     # TypeScript 配置
├── README.md         # 项目说明(本文件)
└── .cursorrules      # 全局开发规范

🎯 学习建议

  1. 选择起点: 从你最熟悉的语言开始
  2. 对比学习: 重点关注语法差异和概念映射
  3. 动手实践: 每个概念都要动手写代码验证
  4. 项目驱动: 通过实战项目巩固所学知识
  5. 循序渐进: 按照模块顺序学习,打好基础
  6. 性能关注: 理解不同语言的性能特性
  7. 最佳实践: 学习各语言的编码规范和最佳实践

语言选择建议

  • 初学者: 建议从 JavaScript → Python 开始,语法相对简单
  • 系统编程: 推荐 JavaScript → Rust 或 JavaScript → C++
  • 并发编程: 推荐 JavaScript → Go 或 JavaScript → Rust
  • 移动开发: 推荐 JavaScript → Swift 或 JavaScript → Kotlin (Android)
  • 后端开发: 推荐 JavaScript → Go 或 JavaScript → Kotlin (JVM)
  • 性能优化: 推荐 JavaScript → Rust 或 JavaScript → C++
  • 企业应用: 推荐 JavaScript → Kotlin 或 JavaScript → Java (JVM)

🌟 特色功能

🔄 交互式代码编辑器

  • 支持多种编程语言语法高亮
  • 实时代码执行和错误提示
  • 代码对比模式,直观显示差异
  • 性能监控和优化建议
  • 虚拟化渲染,支持大量代码

📚 结构化学习路径

  • 模块化课程设计
  • 渐进式难度递增
  • 丰富的代码示例和练习题
  • 实战项目驱动学习
  • 多语言内容支持

🌍 多语言支持

  • 中英文繁体中文三语界面
  • 国际化文档内容
  • 本地化学习体验
  • 语言检测和自动跳转

🔍 智能搜索

  • 全文搜索功能
  • 多语言搜索支持
  • 搜索结果高亮
  • 搜索历史记录

📊 性能优化

  • 图片优化和懒加载
  • 代码分割和按需加载
  • 缓存策略优化
  • SEO 友好设计

📖 文档结构

本项目采用分层文档结构:

根级文档

  • README.md (本文件) - 项目整体介绍和快速开始
  • .cursorrules - 全局开发规范和 AI 助手行为准则

模块级文档

每个语言转换模块都有自己的专门文档:

  • README.md - 模块详细介绍和学习指南
  • .cursorrules - 模块特定的开发规范

文档模板

  • docs/module-documentation-template.md - 新模块创建指南

🤝 贡献指南

欢迎提交 Issue 和 Pull Request!

  1. Fork 本仓库
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 打开 Pull Request

贡献类型

  • 🐛 Bug 修复
  • ✨ 新功能开发
  • 📝 文档改进
  • 🌍 国际化翻译
  • 🎨 UI/UX 优化
  • 🚀 性能优化
  • 🧪 测试用例

开发规范

  • 遵循 TypeScript 严格模式
  • 使用 ESLint 和 Prettier
  • 编写单元测试
  • 遵循 Git 提交规范
  • 更新相关文档

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

感谢所有为这个平台做出贡献的开发者!

📞 联系我们


让编程语言学习变得简单高效! 🚀

About

🌍 Programming language learning platform for developers. Master new languages through comparison learning. Interactive editor, performance monitoring, multi-language support.

Topics

Resources

Stars

Watchers

Forks

Contributors 3

  •  
  •  
  •  
Morty Proxy This is a proxified and sanitized view of the page, visit original site.