jiangyongkang / strikinglybackendtraining

:kiss: ┎愛┐、不夠〃德瞬〃間-\-/留┆８┆住的┾永遠┾ 曾〃經〃的〃美〃麗〃名〃叫〃牽〃挂

Hi there, I'm JiangYongKang 👋

后端工程师一名，目前主力语言是 Java 和 Ruby，熟悉的业务方向有区块链、交易所、微信小程序。

我的 GitHub 统计

strikinglybackendtraining's Issues

Web Frameworks: Rails, Sinatra, Grape, Cuba

What scenarios are these frameworks designed for, respectively?

What problem do they solve, and what problem can they potentially introduce?

Strikingly Backend Training Checklist

Version Control

• Try Git
• Git Tutorial

Basic Ruby & Rails

• Try Ruby
• Ruby on Rails tutorials

Practical Ruby

Check out these gems we use (used, or potentially will use) for production environment and development:

• Web server: Thin, Puma, Unicorn, Rainbows!, Passenger(Raptor)
  • What are the main features provided by these web servers, respectively?
  • Comparing Puma v.s. Unicorn, what are the pros and cons?
• Worker: Sidekiq, Resque
  • Why do we need worker?
  • Sidekiq v.s. Resque
  • Why is Active Job introduced in Rails 4.2? What problem does it solve?
• Web Frameworks: Rails, Sinatra, Grape, Cuba
  • What scenarios are these frameworks designed for, respectively?
  • What problem do they solve, and what problem can they potentially introduce?
• Unit Test Frameworks: RSpec, Minitest
  * What does spec, mock, and stub mean?
  • Pros and cons of RSpec and Minitest

Check out these critical gems we use in our product:

• devise
• doorkeeper
• cancancan
• rollout
  • What can rollout be used for?
• multi_json
  • Why not use built-in JSON processor?
• faraday
  • What's the advantage of using faraday?
• draper
  • What's presenter? What's decorator?
  • Why do we need to use it?
• sidetiq
  • What's the advantage of using sidetiq as scheduler?
• gon
  • What problem does it solve?
• rabl
  • Why do we need this?
• jbuilder
  • Compare to rabl, what's the pros and cons of jbuilder?
• dalli

Check out these critical gems we use for BDD:

• rspec
  • What does mock & stub mean?
  • Why do they deprecate old syntax like "should" and "stub"?
• factory_girl
• vcr
  • What problem does it solve?
• timecop

Advanced Ruby

Checkout "Metaprogramming Ruby":

• Chap 1. Metaprogramming Ruby
• Chap 2. Metaprogramming Rails
• Chap 3. Idioms, DSL & Spell book

Ruby Object Model:

• Constant Lookup
• The Ruby Object Model

Advanced Rails

• Asset pipeline
  • Reference: http://guides.rubyonrails.org/asset_pipeline.html
  • What is asset pipeline?
  • How to organize assets?
  • How does caching work for assets?
  • How to customize asset pipeline?
• Rack middleware
  • Reference: http://guides.rubyonrails.org/rails_on_rack.html
  • What is rack?
  • How does rack middleware work?
• Caching with Rails
  • Reference: http://guides.rubyonrails.org/caching_with_rails.html
  • What are the 3 types of caching in Rails?
  • How does caching work?
  • How to configure caching in Rails?
  • Caching best practices
• Rails Security
  • Reference: http://guides.rubyonrails.org/security.html
  • Potential security problem to watch out
  • Security best practices
• Rails Autoloading (optional)
• Rails upgrading from 3 to 4 (optional)

Advanced programming techniques

• Inversion of control
  • Google what you can find about IOC
  • What great improvement can IOC provides to a Rails stack?
  • What benefits can you get with test stack from IOC?
  • How would you implement it in Ruby?
• Single Responsibility Principle
  • Google what you can find about SRP
  • Why is it important principle to follow?
  • Does that apply for processes or data?
  • Can you imagine simple examples of non SRP code where you can explain why not being SRP is a pain?

See Flo to discuss about your research and thoughts.

Development Workflow

Read the following materials and get familiar with our workflow:

• Github pull request workflow
• Ruby coding convention
• Rails coding convention
• RSpec best practices
• Strikingly API convention
• Spotify software development lifecycle
• https://github.com/strikingly/home/wiki/Code-design

See Flo to discuss about rails large scale applications conventions

Architecture

Our current architecture introduction:

This part will be covered by the backend training session. Please write down your questions if you have any._

• Strikingly System Architecture

Strikingly used to be hosted on Heroku. It is good to get some idea on our old architecture because we borrowed a lot of concepts and best practices from Heroku when designing our new architecture.

• Architecting Applications for Heroku
• Worker Dynos, Background Jobs and Queueing
• Runtime Principles

Here are some best practices on how to build a SaaS platform:

• 12 Factors

Third-party Services:

Play around with these 3rd party services we use in daily work:

• Travis-CI
• Code Climate
• Bugsnag
• Logentries
• New Relic (optional)
• Datadog

Frontend Learning Material (optional)

LESS & CSS

Less - 0.5 day

• Read through all of this. http://lesscss.org/features/
• Implement the following "profile card" image using LESS and HTML - pixel perfect, with semantic tags and classes. using external resources for the background image, profile photo, and fonts
  http://dribbble.s3.amazonaws.com/users/329582/screenshots/1180492/slide-59.jpg
• Review the task with Teng

Should be able to answer:

• What's the difference between position: relative and position: static?
• What are 3 ways to center an element, and when should they be used?
• What are the pros and cons of using em units?

Javascript

Strikingly has a fairly sophisticated frontend system, be sure to familiarize yourself with the following technologies

Basic Javascript 1-2 days

https://github.com/airbnb/javascript/tree/master/es5 - Familiarize yourself with some basic javascript concepts. Take note that this is a style guide from AirBnb, we don't necessarily follow all the styles (we have our own in coffeescript), but it covers a lot of basic javascript concepts.

http://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ - Javascript scoping is probably the most misunderstood part of the language. Having a very good command of it can give you the functional power of Javascript.

If you have more time, go to our library and grab Javascript the Good Parts and read it. Or, go here and read it on your computer: http://www.safaribooksonline.com Set up a trial account and check out the book.

Make sure you can answer the following questions before proceeding

• Difference between == and ===?
• What's lexical scope?
• What do .bind, .call and .apply do?
• How to create a object that has private and public scope?
• What are the reserved keywords in javascript that should be avoided? Why are they reserved?
• How does prototypal inheritance work?

ES6

All the new modules we write are in ES6, so please get familiar with it.

https://babeljs.io/docs/learn-es2015/ - Introduces ES6 features

https://github.com/strikingly/javascript - Our ES6 coding style

Make sure you can answer the following questions before proceeding

• What problem is rest and spread trying to solve?
• What are the ES6 features covered by Coffeescript?
• What is Babel? What does it try to solve

React.js + Flux + Morearty - 1 week

• Go through the tutorial at http://facebook.github.io/react/docs/tutorial.html, ideally go over all the articles in React.js official site.

Task: Build a todo list with no use of flux or anything

• Another very good hands-on tutorial on React and Flux and Immutable.js: http://blog.risingstack.com/the-react-way-getting-started-tutorial/
• Go through Flux tutorial https://facebook.github.io/flux/
• Fluxxor, a variant of Flux, has a really good explanation of Flux: http://fluxxor.com/what-is-flux.html

Task: Build a todo list with the use of flux

• Read about Morearty, and what it does: https://github.com/moreartyjs/moreartyjs

Task: Build a todo list with morearty + flux.

• Read about redux

Task: Build a todo list with redux

Make sure you can answer the following questions before proceeding

• At which of the React.js component lifecycle are we sure that the DOM has been changed?
• How do we avoid component re-rendering?
• What is a Flux store?
• Why do we need the constants in Flux?
• What does Immutable.js solve?
• Where do we put async calls?
• What does Morearty solve?

Practical Javascript

npm

• What are the alternatives to NPM?
• What is bower? What does bower provide that NPM doesn't?
• Can we use node.js modules from NPM in our frontend? If yes, what are pros and cons of this approach? If no, why not?

webpack

• What's the difference between commonjs and AMD?
• What are the differences between webpack and Require.js? Why do you think we prefer webpack over require.js?
• Can we chain loaders? If so, how would you do this?
• Write an example code that use code-splitting to async load js chunk

co

• What's callback hell?
• How does co avoid this?
• What are the other alternatives?

Asset pipeline

What is asset pipeline?

用于连接、简化、压缩静态资源文件，如：JavaScript CSS CofferScript Sass ERB。而它是通过 sprockets-rails 这个 Gem 实现的。
GitHub 地址：https://github.com/rails/sprockets-rails

How to organize assets?

静态资源存放的位置

• app/assets 文件夹用于储存应用自有的静态资源文件，例如自定义图像、JavaScript 文件和 CSS 文件。
• lib/assets 文件夹用于储存自有代码库的静态资源文件，这些代码库或者不适合放在当前应用中，或者需要在多个应用间共享。
• vendor/assets 文件夹用于储存第三方代码库的静态资源文件，例如 JavaScript 插件和 CSS 框架。如果第三方代码库中引用了同样由 Asset Pipeline 处理的静态资源文件（图像、CSS 文件等），就必须使用 asset_path 这样的辅助方法重新编写相关代码。

如何引用资源文件

// app/assets/javascripts/home.js
//= require home

// lib/assets/javascripts/moovinator.js
//= require moovinator

// vendor/assets/javascripts/slider.js
//= require slider

// vendor/assets/somepackage/phonebox.js
//= require phonebox

// app/assets/javascripts/sub/something.js
//= require sub/something

静态资源的加载路径

通过在 Rails 控制台中检查 Rails.application.config.assets.paths 变量，我们可以查看搜索路径。

$ rails c
Running via Spring preloader in process 65665
Loading development environment (Rails 4.2.0)
irb(main):003:0> Rails.application.config.assets.paths.each { |path| puts path }
/Users/vincent/demo/app/assets/images
/Users/vincent/demo/app/assets/javascripts
/Users/vincent/demo/app/assets/stylesheets
/Users/vincent/demo/vendor/assets/javascripts
/Users/vincent/demo/vendor/assets/stylesheets
/Users/vincent/.rbenv/versions/2.2.1/lib/ruby/gems/2.2.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts
/Users/vincent/.rbenv/versions/2.2.1/lib/ruby/gems/2.2.0/gems/coffee-rails-4.1.1/lib/assets/javascripts
/Users/vincent/.rbenv/versions/2.2.1/lib/ruby/gems/2.2.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts

How does caching work for assets?

所有的资源文件都默认的被加载在 app/assets/javascripts/application.js 或者 app/assets/stylesheets/application.css 文件中。
执行 rails assets:precompile 命令可以预编译静态资源文件

$ rails assets:precompile
yarn install v1.2.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
info Lockfile not saved, no dependencies.
✨  Done in 0.04s.
I, [2017-11-02T14:35:11.039239 #65969]  INFO -- : Writing /Users/vincent/development/strikingly-self-training-demos/advanced-rails-asset-pipeline-demo/public/assets/application-48e242c802bc1c1ff4f22b512e0cc49018bdddbceb47f2da7010dc7a1b5c8d15.js
I, [2017-11-02T14:35:11.050635 #65969]  INFO -- : Writing /Users/vincent/development/strikingly-self-training-demos/advanced-rails-asset-pipeline-demo/public/assets/application-48e242c802bc1c1ff4f22b512e0cc49018bdddbceb47f2da7010dc7a1b5c8d15.js.gz
I, [2017-11-02T14:35:11.053435 #65969]  INFO -- : Writing /Users/vincent/development/strikingly-self-training-demos/advanced-rails-asset-pipeline-demo/public/assets/application-961896ee152804be02f1f82f9e66a780981aaa888ef3315220e5aa24e815acc6.css
I, [2017-11-02T14:35:11.053579 #65969]  INFO -- : Writing /Users/vincent/development/strikingly-self-training-demos/advanced-rails-asset-pipeline-demo/public/assets/application-961896ee152804be02f1f82f9e66a780981aaa888ef3315220e5aa24e815acc6.css.gz

How to customize asset pipeline?

先在 Gemfile 文件中添加用于压缩的 Gem。

• https://github.com/AE9RB/closure-script/
• https://github.com/lautis/uglifier/
• https://github.com/sstephenson/ruby-yui-compressor/
• https://github.com/rails/sass-rails/

然后在 config/environments/production.rb 文件中添加或者修改压缩方式，比如采用 uglifier 进行压缩。

# config/environments/production.rb
config.assets.js_compressor = :uglifier

Why not use built-in JSON processor?

Unit Test Frameworks: RSpec, Minitest

What does spec, mock, and stub mean?

Pros and cons of RSpec and Minitest

Web server: Thin, Puma, Unicorn, Rainbows!, Passenger(Raptor)

What are the main features provided by these web servers, respectively?

Thin

• 单线程多进程
• 比较老的一个服务器，停止开发了
• 然鹅，我感觉它还是挺高效的

Unicorn

• 单线程多进程的实现
• 一个进程处理一个请求

Puma

• Rails 5 的默认服务器
• 多线程多进程（Puma 2.0 以前是单线程）
• 一个线程处理一个请求

Rainbows

• 多进程多线程，基于 Unicorn 开发。
• Rainbows 和 Unicorn 是同一作者实现的
• 基本用法、配置 和 Unicorn 几乎一样

Comparing Puma v.s. Unicorn, what are the pros and cons?

Puma 和 Unicorn 之间的性能差异并不是很大。感觉两个之间应用场景不同。
大型应用使用 Unicorn 更好一些，希望节省服务器资源的小型应用更适合用 Puma。
Unicorn 提供了很多通过信号控制进程的手段，方便系统管理员干预应用服务器运行。
在单进程模式下 Puma 只有1个工作进程，单 Unicorn 仍然会启动 master-worker 模式，因此Puma的单进程更节省内存。
Puma的线程可以根据请求自动伸缩，对于请求量小的应用，比较节省资源。
PS: Puma、Unicorn 的进程数量不要开太多，最好和 CPU 的核数相等即可。

我的部署代码案例

• web-server-thin
• web-server-puma
• web-server-unicorn
• web-server-rainbows

参考文档

• Ruby 的多线程应用服务器介绍
• Ruby 服务器对比

Worker: Sidekiq, Resque

Why do we need worker?

Sidekiq v.s. Resque

Why is Active Job introduced in Rails 4.2? What problem does it solve?

What's the advantage of using faraday?