专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

开发

  • Flutter开发环境搭建

    / 分类: 开发 / No Comments

    安装Dart
    brew tap dart-lang/dart
    brew install dart
    # ~/.zshrc 或 ~/.bashrc 新增1行:
    export PATH="$HOME/.pub-cache/bin:$PATH" # pub
    安装fvm (同时安装多个flutter版本)
    pub global activate fvm
    fvm install stable # 或指定比如: 1.10.7, [Versions](http://url.cn/52OcNkr)
    # ~/.zshrc 或 ~/.bashrc 新增1行:
    export PATH="$HOME/fvm/versions/stable/bin:$PATH" # fullter
    # fvm list # 已安装的版本号
    flutter version manager

    fvm或者flutter channel切换版本都不太好用(一个是需要以fvm开始命令, 一个是不能按项目切换版本),
    推荐使用 direnv 设定:

    brew install direnv
    # 项目目录内执行 (指定了version为stable):
    direnv allow;
    echo 'VERSION="stable"; export PATH="$HOME/fvm/versions/$VERSION/bin:$PATH"' > .envrc;
    信息打印
    flutter --version
    flutter doctor -v # 检查环境配置
    # 安装依赖, 比如 XCode, Android Studio
    brew install cocoapods
    编辑器设定:
    • VSCode

      • Extensions安装:Flutter, Dart
      • 如果 VSCode 提示: Could not find a flutter SDK: 重启下VSCode
      • quicktype插件, 根据JSON生成Data Class. 用法:

        • VSCode > Settings 设定 "quicktype.justTypes": false
        • 创建并打开xxx.dart, 复制json代码, VSCode: view > Command Palette > Paste JSON as Code, 根据剪贴板的json生成Code.
        • 生成的code, 最好正则替换下: \b(json\[.*\]).map\( > ($1 ?? []).map(, fromJson\((json\[.*\])\) > fromJson($1 ?? {})
    • Android Studio

      • Android Studio(启动并完成设置向导, Configure/Plugins安装: Flutter, Dart)
      • shell执行: flutter doctor --android-licenses
      • Perferences:

        • Flutter Sdk path: <user>/fvm/versions/stable
        • Dart Sdk path: <user>/fvm/versions/stable/bin/cache/dart-sdk
    模拟器
    • Android模拟器, Android Studio配置:

      • Configure/Tools - AVD Manager, Create Virtual Device, 选择一个设备, Next.
      • 其他版本Android: Preferences - Appearance & Behavior - System Settings - Android SDK, 勾选版本(比如: Android 8.0)安装.
    • IOS模拟器, Xcode配置:

      • Open Developer Tool - Simulator, Hardware - Device, 选择iOS和iPhone型号.
      • 其他版本iOS: Perferences - Components, Simulator 选择一个iOS版本下载.
    flutter emulators # 列出模拟器
    # flutter emulators --launch apple_ios_simulator # 启动模拟器

    环境搭建完毕, 推荐用VSCore开发.

    查看全文 »

  • Dart 语言介绍

    / 分类: 开发 / No Comments

    把年初对dart/flutter/RN的分享内容慢慢整理下, 希望对刚入门app开发的同学有用.

    Dart是什么?

    • Google造的轮子(弥补js的不足)
    • 落: JavaScript(NodeJS/React/RN/Vue等)崛起
    • 起: Google内部孵化了Sky项目(用Dart编写, 后改名Flutter)
    • Google的未来操作系统Fuchsia中,Dart被指定为官方的开发语言
    • 2018年8月正式发布 Dart 2.0
    • Dart可运行在有自己的VM上(DartVM), 也可以编译成Native Code运行在硬件上(Flutter将代码编译成Native Code).

    Dart特性

    • 单线程异步事件模型(single-threaded), similar to NodeJS
    • 强类型语言,支持弱类型写法(2.0开始)
    • DartVM的性能比肩Java7的JVM(作者Lars Bak负责了 HotSpot JVM/V8 engine)
    • 面向对象的,一切数据类型派生自 Object
    • 独特的隔离区(Isolate), 可以实现多线程 (与线程类似但不共享内存)
    • Future、Stream模型(Dart:async库的核心API, 异步编程)
    • 跨平台: 前端、后端、移动

    Dart的方向 (Flutter: iOS,Android,Fuchsia,web,desktop)

    • Native (原生, 移动app/桌面程序)
    • server-side(Server端, 异步高并发/Isolate多线程)
    • client-side(前端, 利用dart2js编译成js)

    Dart 语法

    main() { // 应用的入口, 程序开始执行的地方
     print("Hello, world!");  // 打印信息
    }

    查看全文 »

  • discourse 插件开发

    / 分类: 开发,实践 / No Comments

    开发discourse插件, 依赖的知识: ES6/SCSS/Ember.js/Rails/handlebars.
    Ember是前端MVVM框架, 支持数据双向绑定/虚拟DOM, 模板引擎使用handlebars, 依赖jQuery(处理DOM兼容性操作), 遵循约定优于配置原则(类似Rails).

    discourse 本地环境搭建

    依赖: ruby, postgres, redis 需要提前安装好.

    • macOS 安装Ruby2.6

      brew install rbenv; rbenv init; rbenv install 2.6.2; # discourse依赖 Ruby 2.5+
    • (推荐) 用docker搭建本地 postgres, redis

      # code db.yml
      version: '3.1'
      services:
        redis:
          container_name: redis
          image: redis:alpine
          ports:
            - "6379:6379"
        postgres:
          container_name: postgres
          image: postgres:9-alpine
          ports:
            - "5432:5432"
          environment:
            - POSTGRES_USER=postgres
            - POSTGRES_PASSWORD=postgres
      # docker-compose -f db.yml up -d # 启动 postgresql/redis
      # docker restart postgres redis # 重启 postgresql/redis
    git clone https://github.com/discourse/discourse.git;
    # git checkout tags/v2.2.4; # 指定某个稳定的版本
    code config/database.yml # 设定 postgres 数据库信息
    development: # 设定正确用户名/密码
      username: name
      password: pass
      host: localhost
      host_names: # 本地论坛域名(不添加: 影响 hot reload)
        - leon.lvh.me
    bundle install; # 安装依赖
    rake db:create db:migrate; # 创建数据库
    # rails r "SiteSetting.min_password_length=8;SiteSetting.min_admin_password_length=8;" # 设定密码最少8位
    rake admin:create # 创建用户, 输入Email/password/是否管理员
    # rails r "u=User.find_by_email('test@test.com'); u.password='11112222'; u.save!;" # 修改用户密码
    rails s -p 8000 # 启动论坛, 访问 localhost:8000

    查看全文 »

  • [译] 对比Redux和Relay

    / 分类: 开发 / No Comments

    原文: Comparing Redux and Relay, 作者: Mikhail Novikov (reindex CTO & Co-founder)

    注: 译文内容根据个人对Redux和Relay的使用经验而翻译, 如发现任何问题, 望指正(可留言或Email: kairyou@qq.com).

    开发React应用, 有时必须要解决管理客户端state的问题. 现代应用程序不应总是等服务器的响应, 切换页面就要重新请求, 而应该让页面展现尽可能地快. 应用的状态管理层(也可称为缓存层或模型层)正是负责处理这些逻辑.

    Redux和Relay在应用中就是负责这一层. 本文会用一些常见的示例代码来比较这两个库。

    架构概述

    Redux和Relay的灵感都源于Flux(一种架构模式用来设计应用程序, 和MVC属同类). Flux的基本思路是让数据从应用的数据存储中心(Stores)到组件(Components)始终单向流动(单向数据流). 组件调用Action创建函数(Action Creators), 将Actions发送给Store. Flux最初由Facebook提出, 但是他们并没有提供一个已集成好Flux的现成库. 之后, 开源社区很快出现了许多Flux实现, 还有更多自定义实现在闭源代码库中 :). Flux很适合作为React的数据模型, 因为它禁止数据从子组件向上传递到store, 数据的修改必须通过dispatch(action)完成.

    Redux

    Redux简化了Flux架构. 把Flux中多个Store的概念简化成只有一个Store.
    Store的数据可以通过转换方法传给组件(provider把store的数据传给connect, 让它把这些数据传给组件).
    Store可以通过reducers处理action. 最大的区别是, reducer是纯函数, 接收2个参数, 现有的state(previousState)和action, 并返回新的state.
    Action, 在Flux中通常是改变state的操作, 在Redux中是函数式转换(Flux里的action是函数的形式,但在redux里是普通的js对象). 任何数据都可以储存在Redux store.

    Redux是一个很小的库. Action可以通过中间件来拦截或改变, 开源社区中也有很多中间件可用. 通过中间件, 编写功能完善的Redux应用会更容易.

    Relay

    Relay在很多方面也受到Flux启发. 只有一个store,通过action去改变(在Relay中称为Mutations). 然而, Relay禁止开发人员直接控制Store的内容. 相反, Relay根据GraphQL查询语句去自动处理, 储存或修改服务端数据.
    组件通过编写GraphQL查询片段(fragments)来描述依赖的数据, Relay会根据当前组件树中所有组件的依赖数据描述去自动优化查询(把多个组件的请求合并为1次GraphQL请求).
    对Store的修改(写操作)可以通过mutation(变更)来实现, mutations在客户端和服务器端都修改数据, 保持数据一致. 不同于Redux, 在Relay中只能变更在服务端声明过的数据, 并且服务器必须有一个GraphQL服务.

    Relay提供了许多很赞的功能. Relay负责所有数据的获取, 并确保所需数据无异常. Relay有完善的分页支持, 很适合类瀑布流类的场景(无限滚动). Relay mutations可以做到乐观更新(Optimistic Update), 即: 页面UI先改变, 再以服务器返回结果为准更改页面UI, 如果出错会回滚.

    查看全文 »

  • 解决新版npm乱码

    / 分类: 开发 / No Comments

    新版npm install的时候, 可能会看到类似这样的特殊字符:
    loadDep:glob-base ▌ ╢█████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░╟

    应该是新版针对可显示特殊字符的环境故意为之, 如果希望看到下面这样的效果:
    loadDep:glob-base / |#############-------------------|

    OSX系统选了语言为英文: LC_CTYPE=en_US.UTF-8 npm install

    OSX系统选了语言为中文: LANG= npm install

    所以通用的解决办法: 在~/.zshrc~/.bashrc里增加一行
    alias npm="LC_CTYPE=en_US.UTF-8 LANG= npm"

    重新加载配置, 或者重启Terminal后, 发现npm install变正常了~

    选择正常, 还是非主流, 看个人喜好吧~