frontend-tech

Month: 2017-12

2017-12-01

jihchi 09:04:41
https://burkeknowswords.com/introducing-react-food-truck-b23ea1e2cf79

Burke Knows Words

Introducing React Food Truck – Burke Knows Words

There are many important questions to ask when you are building an application. Questions like: “Who are the users?”, “What browser will…

jihchi 10:31:15
快速掃了一下,蠻不錯,React developer 可以考慮裝。
mrorz 10:33:02
但他會把 props 展開成
```
const {
props: { children },
} = this;
```

lol
jihchi 09:11:51
Type-Safe GraphQL with OCaml (part 1) · Andreas Garnæs
https://andreas.github.io/2017/11/29/type-safe-graphql-with-ocaml-part-1/

2017-12-02

jihchi 23:52:05
https://github.com/reactopt/reactopt

GitHub

reactopt/reactopt

reactopt - A CLI React performance optimization tool that identifies potential unnecessary re-rendering

yhsiang 16:28:10
NOTICE: node 7.6+
yhsiang 16:28:21
後面是用 puppeteer
jihchi 19:52:57
AWESOME
jihchi 23:52:40
https://github.com/ianstormtaylor/superstruct

GitHub

ianstormtaylor/superstruct

superstruct - A simple and composable way to validate data in Javascript.

2017-12-03

2017-12-04

jihchi 22:49:26
https://haltu.github.io/muuri/

haltu.github.io

Muuri - Responsive, sortable, filterable and draggable grid layouts

Muuri is a JavaScript library that creates responsive, sortable, filterable and draggable grid layouts.

jihchi 22:49:43
https://github.com/diit/overtime-cli

GitHub

diit/overtime-cli

overtime-cli - Easy time-overlap tables for remote teams.

jihchi 22:51:11
我的 Chrome 跑是壞的..

2017-12-05

jihchi 08:36:28
https://twitter.com/kentcdodds/status/937686244045176832

twitter

:atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift: Here's my big announcement! My <https://twitter.com/eggheadio|@eggheadio> courses have been published and are totally FREE! “Learn React Fundamentals and Advanced Patterns” <https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db> :atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift:

jihchi 08:39:32
https://twitter.com/thelarkinn/status/937777635626688512

twitter

:heart_eyes::heart_eyes::heart_eyes::heart_eyes: On the 4th day of #webpack #JavaScript Christmas, our team gave to you! :heart::heart::heart::heart::heart::heart::heart: #webpack 4.0.0-alpha.0 :heart::heart::heart::heart::heart::heart::heart: All hands on deck, we'd love as much testing and feedback as possible. Please RT for coverage!!! SO MUCH TO TRY OUT!!!!!! <https://pbs.twimg.com/media/DQOnllZU8AA60Sa.jpg>

<https://pbs.twimg.com/media/DQOnoEbUIAAXOMd.jpg>

<https://pbs.twimg.com/media/DQOnqcbVoAARtiO.jpg>

<https://pbs.twimg.com/media/DQOnvhtVoAA-UUn.jpg>

jihchi 09:07:56
Curry away in React – Hacker Noon
https://hackernoon.com/curry-away-in-react-7c4ed110c65a

這用法在 render-intensive component 會很慘

Hacker Noon

Curry away in React – Hacker Noon

So you’re going to build the next-gen eCommerce company selling dog supplies and you’ve decided to use React to build it with coz, you know…

jihchi 22:04:03
https://github.com/appier/create-react-app/releases/tag/react-scripts-appier%407.0.2

GitHub

appier/create-react-app

create-react-app - Create React apps with no build configuration.

yhsiang 22:20:00
寫投影片中 XD
jihchi 22:24:00
`subdirs` 已加上 7.0.2
jihchi 23:11:17
https://github.com/prettier/prettier/releases/tag/1.9.0

GitHub

prettier/prettier

prettier - Prettier is an opinionated code formatter.

jihchi 23:31:50
https://twitter.com/wsokra/status/937937284808265728

twitter

#webpack 4 release will be somewhere around February - March 2018. Release Candidate will be at least 1 months before release. With the RC we will announce the final release date.

2017-12-06

Michael Hsu 09:14:57
https://twitter.com/devongovett/status/938084464743165952

twitter

:package::rocket: Super excited to announce Parcel: A blazing fast, zero configuration web application bundler! :computer: Github: <https://github.com/parcel-bundler/parcel> :earth_americas: Website: <https://parceljs.org> :memo: Background: <https://medium.com/@devongovett/announcing-parcel-a-blazing-fast-zero-configuration-web-application-bundler-feac43aac0f1> <https://pbs.twimg.com/media/DQS-1-bUQAE7nVb.jpg>

Michael Hsu 09:24:29
https://twitter.com/BenLesh/status/938184403066298368

twitter

#RxJS 5.5.4 has been released. Resolves a couple of regressions caused in 5.5.3. #MyFault :pray::pray::pray: <https://github.com/ReactiveX/rxjs/blob/stable/CHANGELOG.md#554-2017-12-05>

Michael Hsu 09:39:19
https://medium.com/@ericsimons/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403

Medium

Introducing Turbo: 5x faster than Yarn &amp; NPM, and runs natively in-browser :fire:

Note: This is part of a talk I’m giving at Google’s Mountain View campus on Wednesday, December 6th — come join!

2017-12-07

jihchi 08:43:43
https://twitter.com/mathias/status/938341147570835457

twitter

:package: jsvu lets you quickly install or update JavaScript engine binaries with a single command :fire: <https://github.com/GoogleChromeLabs/jsvu> Supported engines: - <https://twitter.com/ChakraCore|@ChakraCore> - JavaScriptCore - <https://twitter.com/SpiderMonkeyJS|@SpiderMonkeyJS> - <https://twitter.com/v8js|@v8js> Perfect in combination with eshost-cli! <https://pbs.twimg.com/media/DQWoSLuXkAAZLwh.png>

<https://pbs.twimg.com/media/DQWoSQvW0AA_2Vg.png>

jihchi 08:54:42
https://twitter.com/mxstbr/status/938352788479848448

twitter

redux-saga vs. redux-observable: Which one to use for complex asynchronous flows, and why? :thinking_face: Tons of practical experiences in this thread: <https://spectrum.chat/thread/2e738f7a-b385-4120-aff1-5fca9d1a6f34> :100:

jihchi 08:56:11
https://twitter.com/thelarkinn/status/938201037852221440

twitter

Okay I forgot here on previous photo's I didn't include a11y-friendly stats: So webpack v4, without sideEffects: false lodash-es (one export 'add'): 600 KiB minified d3 (one export 'treemap'): 100 KiB minified w/ `sideEffects: false` lodash-es: ~3 KiB d3: ~1 KiB :heart_eyes: <https://twitter.com/TheLarkInn/status/938188174794223616>

twitter

Nice to see <https://twitter.com/jdalton|@jdalton>'s lodash come to life as its intended tiny size!!! That :deciduous_tree:shaking for the win with #webpack 4.0.0-alpha and "'sideEffects': false". This is the promise of ESM modules. &lt;3 Will need to try d3 next and compare, cc <https://twitter.com/mbostock|@mbostock> #JavaScript #AlwaysBetOnWebpack <https://pbs.twimg.com/media/DQUdDGKUEAATCG-.jpg>

itsmisscs 09:11:58
https://github.com/reactjs/rfcs

GitHub

reactjs/rfcs

rfcs - RFCs for changes to React

jihchi 10:11:06
https://github.com/reasonml-community/index

GitHub

reasonml-community/index

index - Index of available BuckleScript bindings

Michael Hsu 15:32:39
https://github.com/react-community/reason-react-native-scripts

GitHub

react-community/reason-react-native-scripts

Contribute to reason-react-native-scripts development by creating an account on GitHub.

2017-12-08

mofas 07:04:03
https://reactjs.org/blog/2017/12/07/introducing-the-react-rfc-process.html

reactjs.org

Introducing the React RFC Process - React Blog

We’re adopting an RFC (“request for comments”) process for contributing ideas to React. Inspired by Yarn , E

jihchi 08:40:15
https://twitter.com/code/status/938825465988636676

twitter

More Git improvements: review and stage changes directly inline! Get the latest <https://twitter.com/code|@code>: <https://buff.ly/2Ap137x>

Michael Hsu 12:26:03
https://twitter.com/thejameskyle/status/938981209035571200

twitter

Published an npm package that polyfills the proposed React Context API: - Repo: <https://github.com/thejameskyle/create-react-context> - RFC: <https://github.com/reactjs/rfcs/pull/2> <https://pbs.twimg.com/media/DQfuazyVwAAFYeW.jpg>

mofas 13:31:11
https://twitter.com/ElleOhHell/status/938466491510476805

twitter

If Wonder Woman and Spider-Man go into business together, they should call it Amazon Web Services.

jihchi 18:40:24
https://twitter.com/2ality/status/938980729932759040

twitter

ReasonML: basic values and types <http://2ality.com/2017/12/basic-types-reasonml.html>

2017-12-09

mofas 10:30:36
最近看完Kent的 advanced react toturial
mofas 10:31:15
覺得介紹方式超OO, 雖然是用FP方式去寫, 但是每一種方法都要給個pattern name
mofas 10:31:45
有沒有這麼煩呀, 不就單純使用abstract或是partial function而已= =
mofas 13:28:25
https://twitter.com/paf31/status/939254996977172480

twitter

My OBT-2018 submission was rejected sadly, but here it is anyway: a short two-page introduction to a comonadic semantics of user interfaces: <http://functorial.com/the-future-is-comonadic/main.pdf>

2017-12-10

mofas 07:55:05
https://evilmartians.com/chronicles/evil-front-part-1

Martian Chronicles

Evil Front Part 1: Modern Front-end in Rails — Martian Chronicles

An opinionated guide to modern, modular, component-based approach to handling your presentation logic in Rails that does not depend on any front-end framework. Follow our three-part tutorial to learn the bare minimum of up-to-date front-end techniques by example and finally make sense of it all. Part 1: goodbye Asset Pipeline, code organization, linting.

mofas 07:58:35
Well, I feel Ruby is so obsolete when I read this "latest" article for FE developing.
mofas 07:59:36
You need to do some much configuration to develop in modern way.
mofas 07:59:43
And this is the only part 1

2017-12-11

Michael Hsu 10:47:00
https://twitter.com/jiayi_ghu/status/939801924655869952

twitter

:fire: Finally had the time to finish react-tiny-dom, a minimal implementation of react-dom using react-reconciler APIs: <https://github.com/jiayihu/react-tiny-dom> I think it could very useful to see how to implement a custom renderer in React 16 <https://twitter.com/reactjs|@reactjs> <https://twitter.com/dan_abramov|@dan_abramov> <https://pbs.twimg.com/media/DQrXoCzX0AAqZmd.jpg>

jihchi 18:48:23
https://twitter.com/saadabedine/status/940089276951289856

twitter

When HTML is life. <https://pbs.twimg.com/media/DQveNYYU8AEudD9.jpg>

jihchi 18:53:29
https://twitter.com/fermatslibrary/status/939862298268786688

twitter

73939133 is the largest prime number with this curious property: if you take one or more digits off the end, the resulting numbers are all prime. <https://pbs.twimg.com/media/DQsPx1WXUAAQ7RA.jpg>

2017-12-12

mofas 00:20:52
https://deeplearnjs.org/

deeplearnjs.org

deeplearn.js

a hardware-accelerated machine intelligence library for the web

mofas 00:21:05
竟然有這麼晚整的package了
jihchi 00:28:55
better late than never
jihchi 08:37:27
https://twitter.com/ebidel/status/940297256745308160

twitter

PSA: Network throttling has been added to headless Chrome 63. Means you can now reliably use it with <https://twitter.com/____lighthouse|@____lighthouse>:bulb::house: for perf testing or Puppeteer 🤹:skin-tone-2:‍♂️ to automate device emulation in CI! Among 1000s of other use cases :) <https://bugs.chromium.org/p/chromium/issues/detail?id=728451#c10>

jihchi 08:38:21
https://twitter.com/umaar/status/940352091452837888

twitter

30 seconds of code :star: <https://github.com/Chalarangelo/30-seconds-of-code> - Curated collection of useful Javascript snippets that you can understand in 30 seconds or less :timer_clock: - Also useful for functional programming in JS! <https://pbs.twimg.com/media/DQzNDDaW4AIHOGc.png>

jihchi 08:39:51
https://twitter.com/jordwalke/status/940355721354387456

twitter

Now, <https://twitter.com/reasonml|@reasonml> is licensed under the MIT license! Thanks to <https://twitter.com/dmwlff|@dmwlff>, FB legal, and <https://twitter.com/fbOpenSource|@fbOpenSource> people (you know who you are) <https://github.com/facebook/reason/commit/e8fb73ec6ff7c3136715a3c628769e3d5906c4f0>

jihchi 08:40:22
https://twitter.com/code/status/940309249095294976

twitter

Add multiple root folders to your workspace (Multi Root Workspaces) in <https://twitter.com/code|@code>'s latest release: <https://buff.ly/2A3Lcb9>

mofas 08:58:44
https://twitter.com/zofgames/status/940245768337788929

twitter

HardSource #Webpack Plugin version 0.5 is out! <https://www.npmjs.com/package/hard-source-webpack-plugin> Primary changes are - No longer depends on binary dependencies - Better ES2015 support - Serializes ModuleConcatenationPlugin - Better `environmentHash` default so less projects need it

mofas 08:59:01
hardsource become popular those day.
mofas 08:59:11
5k daily download ~
jihchi 09:53:30
https://stackoverflow.com/questions/47761894/why-are-fragments-in-react-16-better-than-container-divs

stackoverflow.com

Why are Fragments in React 16 better than container divs?

In React 16.2, improved support for Fragments has been added. More information can be found on React's blog post here. We are all familiar with the following code: render() { return ( //

Michael Hsu 12:31:12
https://github.com/developit/microbundle

GitHub

developit/microbundle

microbundle - Zero-configuration bundler for tiny modules, powered by Rollup.

Michael Hsu 12:31:18
https://github.com/egoist/poi

GitHub

egoist/poi

poi - :zap: Delightful web development.

Michael Hsu 12:31:28
各種 zero config
Michael Hsu 12:32:00
https://github.com/graphcool/graphql-yoga

GitHub

graphcool/graphql-yoga

graphql-yoga - 🧘 Fully-featured GraphQL Server with focus on easy setup, performance &amp; great developer experience

jihchi 14:34:10
https://github.com/andrewdavey/immutable-devtools 無意間發現一個好物!有用 Immutable.js 的好工具

GitHub

andrewdavey/immutable-devtools

immutable-devtools - Chrome Dev Tools custom formatter for Immutable-js values

jihchi 19:10:35
https://twitter.com/jedwatson/status/940452745642786817

twitter

I just published an issue on the future of react-select: <https://github.com/JedWatson/react-select/issues/2208>

jihchi 19:11:36
https://twitter.com/sebmarkbage/status/940484973953294337

twitter

<https://twitter.com/kentcdodds|@kentcdodds> PureComponent was really mostly added to enforce that you don't rely on random mutation. To give React the option to bailout rather than force a bailout like sCU. I'd recommend using it everywhere so you have the option to bailout when you do need it.

2017-12-13

jihchi 08:32:58
https://twitter.com/popmotionjs/status/940579440672768000

twitter

Incredibly happy, and proud, to introduce Popmotion 8! A functional, reactive JavaScript motion library <https://popmotion.io>

jihchi 08:36:06
https://twitter.com/mattmueller/status/940621130737389568

twitter

I'm very excited to finally share what I've been working on. Introducing the Joy Compiler: Translate idiomatic Golang into concise Javascript that works in every browser. <https://mat.tm/joy/>

mofas 11:28:59
https://stateofjs.com/2017/introduction/

stateofjs.com

The State of JavaScript 2017: Introduction

A short survey about current popular JavaScript technologies.

mofas 11:31:21
https://stateofjs.com/2017/other-tools/
VS竟然超越Atom這麼多 lol

stateofjs.com

The State of JavaScript 2017: Other Tools

A short survey about current popular JavaScript technologies.

jihchi 11:31:51
現在周圍幾乎都用 VS Code
mofas 11:31:56
eslint is still dominate on linter ..
jihchi 11:32:35
VS Code launch speed 已經是讓你不覺得慢了
mofas 11:32:56
I believe prettier + flow/ts combination will be the better choice.
mrorz 16:15:00
@mrorz set the channel topic: 前瞻性技術之頻道。
討論紀錄:https://g0v-tw.slackarchive.io/frontend-tech
mrorz 17:32:46
eslint 是因為他很會整合吧。
像我們就是用 eslint 來呼叫 prettier 然後把 prettier 的 config 存在 eslint 的 config 裡頭。這樣他統計應該是兩者各加一票。

雖然現在 prettier 已經支援 config files 了,但 linter 設定不會一天到晚改,2017 年用了就是用了,最快明年才會改 XDD
jihchi 19:13:59
https://twitter.com/bahmutov/status/940796962269548545

twitter

How did Ramda - a functional programming library allowed itself to be included in the "state of JavaScript"?!! <http://stateofjs.com/2017/other-tools/>

mofas 22:25:44
https://twitter.com/v8js/status/940879905079873536

twitter

:mega: V8 has native support for JavaScript code coverage. Tools like <https://twitter.com/ChromeDevTools|@ChromeDevTools> and Istanbul can now access V8’s coverage information without instrumenting the code! <https://v8project.blogspot.com/2017/12/javascript-code-coverage.html> <https://pbs.twimg.com/media/DQ6tR7wXUAYP5Ge.png>

2017-12-14

mofas 08:48:49
https://twitter.com/reactjs/status/941104685523406848

twitter

Hi friends. :sparkling_heart: The stars haven't quite aligned, so we won't have React Conf in early 2018 like we have in past years. TBD if we'll host something in the later half of the year. Maybe we'll catch y'all at another conference next year though! :rocket:

jihchi 19:07:48
https://twitter.com/jhusain/status/941182249671696384

twitter

Facebooks Haxl library for Haskell is great example of why it pays to learn a teensy bit of category theory. Think async/await on steroids. Now the compiler magic that makes this possible has landed in <https://twitter.com/purescript|@purescript>, so you can write Node apps this way! <https://m.youtube.com/watch?v=sT6VJkkhy0o>

2017-12-15

jihchi 08:34:13
https://twitter.com/wsokra/status/941331347653779457

twitter

#webpack 4 alpha.1 * importing wasm now correctly exports (no extra default) * overriding side effects for libraries possible via rules * minimizing added to production mode, uglifyjs 3 * cli move to webpack-cli * better progress reporting <https://github.com/webpack/webpack/issues/6132>

jihchi 08:36:03
https://twitter.com/fbopensource/status/941370631357997056

twitter

We are excited to announce the launch of <https://twitter.com/docusaurus|@docusaurus> - an infrastructure to help you easily create and manage open source websites. <https://docusaurus.io/blog/2017/12/14/introducing-docusaurus.html>

jihchi 08:37:08
https://twitter.com/jedwatson/status/941298755323621376

twitter

Just published react-value It's a super simple component + HOC for turning controlled value into uncontrolled value, using a render prop. <https://github.com/jedwatson/react-value>

jihchi 08:39:38
https://twitter.com/jasnell/status/941371538623881216

twitter

I just published “Node.js and the Web Tooling Benchmark” <https://medium.com/p/node-js-and-the-web-tooling-benchmark-c982a88cf5b6>

jihchi 09:09:33
https://medium.com/@kevlinhenney/simplicity-before-generality-use-before-reuse-722a8f967eb9

Good article for software engineers

Medium

Simplicity Before Generality, Use Before Reuse – Kevlin Henney – Medium

A common problem in component frameworks, class libraries, foundation services, and other infrastructure code is that many are designed to…

Michael Hsu 09:42:25
https://twitter.com/evenchange4/status/941483387386175489

twitter

What's the difference between graphcool framework and graphql-yoga? graphcool framework =&gt; graphql native graphql-yoga =&gt; API gateway <https://github.com/graphcool/graphql-yoga/issues/29>

Michael Hsu 09:43:12
https://github.com/jaredpalmer/awesome-react-render-props

GitHub

jaredpalmer/awesome-react-render-props

awesome-react-render-props - :sunglasses: Awesome list of React components with render props

mofas 11:09:59
https://egghead.io/

egghead.io

Short,instructional screencast video tutorials for web developers on @eggheadio

Concise screencast video tutorials that cover the best tools, libraries, and frameworks that modern javascript web developers can use to code more effectively and stay current.

mofas 11:10:06
最近有holiday free course
mofas 11:10:09
想看的快看喔
jihchi 15:31:54
有推哪個嗎?
jihchi 18:47:31
https://twitter.com/toddmotto/status/941031523184250880

twitter

:zap: New post: Finally understand Redux by building your own Store. <https://toddmotto.com/redux-typescript-store>

2017-12-16

mofas 03:56:04
推薦這一個
https://www.youtube.com/playlist?list=PLbgaMIhjbmEnaH_LTkxLI7FMa2HsnawM_

YouTube

Category Theory - YouTube

Category theory for programmers by Bartosz Milewski. Seattle, Summer 2016. Additional material at <https://bartoszmilewski.com/2014/10/28/category-theory-for->...

mofas 09:46:56
https://egghead.io/courses/state-monad-in-javascript?utm_content=buffer31cc6&amp;utm_medium=social&amp;utm_source=twitter.com&amp;utm_campaign=buffer

egghead.io

JavaScript tutorial: State Monad in JavaScript from @evilsoft on @eggheadio

Dealing with stateful computations can be a challenge when writing purely functional JavaScript. They can result in undesired variable declaration at best and boilerplate state management code in every function dependent on the state at its worst. In this course we will explore a well know Algebraic Data Type named State, that is built from the ground up to address these :corn:cerns. While this course will be focused around a State implementation provided by a library named crocks, a majority of the techniques we learn here can be used with most of the State implementations in the wild.

mofas 09:47:04
stateMonad in JS..
mofas 09:47:50
有興趣的話..
我也用JS 寫了一個極簡版本的
https://gist.github.com/mofas/dee44d8ba633cc63fbd0f7ef2b9ac008
mofas 09:47:56
stateMonad.js

2017-12-17

jihchi 10:55:46
https://twitter.com/_developit/status/941715749458018305

twitter

:mega: I have an exciting announcement: I'm joining the Chrome team <https://twitter.com/Google|@Google> in the new year! Looking forward to pushing the web...forward! :blush:

jihchi 10:57:11
Author of preact joined Google!
jihchi 15:22:52
https://github.com/c8r/x0

GitHub

c8r/x0

x0 - Zero-config React development environment and static site generator

jihchi 15:37:58
https://github.com/btholt/sfo

GitHub

btholt/sfo

sfo - Instant build process

lynn 16:11:47
@lynn has joined the channel

2017-12-18

mofas 00:55:39
最近在逛一些網站 發現字體變得很漂亮,
https://github.com/necolas/normalize.css/issues/665

GitHub

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif · Issue #665 · necolas/normalize.css

It's time to add: font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif This solution is harmless and very useful. It is used by GitHub, Wordpr...

mofas 00:55:54
後來查發現好像是apple的字體
mofas 04:55:02
https://twitter.com/jaredpalmer/status/942410160739377152

twitter

Woah. React-based game framework... <https://github.com/google/boardgame.io>

jihchi 08:38:12
https://twitter.com/ntulswani/status/942079674527518720

twitter

Introducing React Performance Devtool !! A chrome extension to inspect the performance of React components. Github - <https://github.com/nitin42/react-perf-devtool> Chrome extension - <https://chrome.google.com/webstore/detail/react-performance-devtool/fcombecpigkkfcbfaeikoeegkmkjfbfm> cc <https://twitter.com/PKodmad|@PKodmad> Demo :point_down:

jihchi 08:47:09
https://twitter.com/benlesh/status/942299783917477888

twitter

LOL. I'm still not using G+. Although I do think it's better, feature wise, than Facebook. <https://twitter.com/_youhadonejob1/status/941418759583158273>

twitter

Social media explained. <https://pbs.twimg.com/media/DRCXX0xX4AAI77q.jpg>

mrorz 10:22:03
不是很能理解 Svelte 跟 Vue 的 vue 檔差在哪裡 lol
mrorz 10:28:18
他要做 observable 與 2-way binding 還是要弄個 runtime 呀 ._.
jihchi 10:34:12
Svelte 產生 Vanilla JavaScript,沒有 runtime
jihchi 10:37:28
不過還是得有些 "code" 來達成 observ. / 2-way binding
mrorz 10:39:46
我對 runtime 的理解是
例如說我們寫了一個 React component
我們定義了 render(),他就會在正確的時間被執行
這對我來說就是 runtime 幫我做的事情
mrorz 10:40:15
而 svelve 他的 hello world 範例,編出來長這樣
mrorz 10:40:57
update function
jihchi 10:42:39
Svelte 就幫你用 native JS / DOM API 去組出這些功能
mrorz 10:42:49
而這個 update (`p`) 在 setState 的時候會被執行
jihchi 10:43:07
React 還需要 lib 多一層 "runtime" 去組出這些功能
mrorz 10:43:16
setState
mrorz 10:43:31
這就像是在 babel compile 時把 runtime 塞進去不是嗎 Orz
mrorz 10:44:03
看起來是不用 import 一個 “library” 沒錯
mrorz 10:44:11
因為他在 compile 時塞進去惹。
mrorz 10:45:05
然後如果這個 compiler 足夠聰明
複數個 svelve compoent 被 compile 時只會塞 1 份這些 function 的話
mrorz 10:45:20
那看起來就像是自動 import 了一個 library 不是嗎 QQ
jihchi 10:45:28
是喔,沒錯
jihchi 10:46:09
嚴格說起來,就差在你自己 createElement 跟有沒有 lib / compiler 幫你 createElement
mrorz 10:46:27
所以我覺得沒有 runtime 這件事情像是行銷話術
jihchi 10:47:01
Svelte 一個賣點就是,我 compile 出來就是 Vanilla JavaScript,可以用在任何 React / Angular / Vue
mofas 10:47:12
我覺得比較像是inline function的optimization
mofas 10:47:39
你哪一個code compile出來不是vanilla js = =
mofas 10:47:46
只是有沒有reuse function而已
mofas 10:48:08
library就保留原來function然後reuse
mofas 10:48:27
假如svelve夠聰明可以做staging
mofas 10:48:32
或是partial evaluation
mrorz 10:48:34
React runtime 無法被用在其他地方是因為他的 runtime 接管了 DOM,嚴格使用 lifecycle 來處理事情,任何其他對 DOM 的操作,如果沒有做特殊處理(shouldComponentUpdate)的話,會被 react 給覆蓋或弄壞

svelve 之所以可以被重用,是因為他的 “runtime” 直接操作 DOM
mrorz 10:48:43
而不是因為他「沒有 runtime」
mofas 10:48:46
那其實runtime loading會更小
mrorz 10:48:48
也不是因為他 compile to vanilla
jihchi 10:49:58
我不知道怎麼在 Angular 裡面 import React component 來用..
mrorz 10:50:22
那是因為 Angular 的 runtime 用了 digest loop,不照他的做法來做會壞掉
mrorz 10:50:53
因此 svelte 之所以可以 portable 是因為他「直接操作在 DOM 上」
mrorz 10:51:07
沒有 DOM 之外的其他邏輯
mrorz 10:51:17
我覺得更像是 2018 年的 jQuery UI
mrorz 10:51:29
API 很不錯
mofas 10:51:37
喔 那就是No virtual DOM render而已
mrorz 10:51:39
行銷話術很猛
jihchi 10:51:49
> 我覺得更像是 2018 年的 jQuery UI
這句很不錯
mofas 10:52:15
叫 Real DOM render 會不會比較酷
mofas 10:52:34
應該是他可以完整判斷data 有沒有變
mofas 10:52:42
根本就不需要用virtual DOM去比對
mofas 10:52:58
這才是他高效的地方ㄅ
mrorz 10:53:11
可能有人用過了吧 lol
例如說 morphdom
mrorz 10:55:18
https://github.com/patrick-steele-idem/morphdom

GitHub

patrick-steele-idem/morphdom

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

mrorz 10:55:23
這樣不行,沒有行銷點 (?)
jihchi 10:56:03
沒有包裝好
mrorz 10:56:17
嗯嗯,他是 basic building block
jihchi 10:56:21
Svelte 包裝好,讓你寫起來感覺像 React component
jihchi 10:56:28
還有附加一堆東東
mrorz 10:56:35
包好之後 DX 才會讓人想用
jihchi 10:57:53
看一些 open source project 在推廣,很多 DX 考量都超越 language 本身了 ..
jihchi 10:58:13
Reason 3 就很 JS ..
mrorz 10:58:14
我覺得 svelte 真正做的事情是
「你寫 html 與 component config,我在 babel compile 時幫你接 DOM API 與 2-way binding」
mrorz 10:59:30
文件裡那些慷慨激昂的「讓我們一起改變 2018 年的前端」不知道是誰想出來的 ._.
mrorz 10:59:36
募資ㄇ
jihchi 11:00:36
XD 哪裡看到啊?
mrorz 11:01:35
https://svelte.technology/blog/frameworks-without-the-framework

> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
jihchi 11:02:56
哪一段啊?
mrorz 11:08:09
抱歉有點超譯了他的話 QQ

原文一開始是一個設計對白
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018

文末則有
> head over to GitHub to help kickstart the next era of front end development.
jihchi 11:10:34
有有有,意思有到
jihchi 11:11:02
「開啟前端開發下一個紀元」 XD
mofas 11:01:17
大大們可以踩雷一下
https://github.com/parcel-bundler/parcel

GitHub

parcel-bundler/parcel

parcel - :package::rocket: Blazing fast, zero configuration web application bundler

jihchi 11:03:22
@yhsiang 有玩了一下 https://github.com/yhsiang/reason-parcel-demo

GitHub

yhsiang/reason-parcel-demo

reason-parcel-demo - Create ReasonReact project with Parcel in 5 minutes

Michael Hsu 11:03:59
https://twitter.com/thekitze/status/941969671124848640
好久沒用 v2也改成 render prop 了

twitter

TIL, react-transition-group has a much better API now:ok_hand: Here's how you can write a simple Fade component. Sandbox here: <https://codesandbox.io/s/y26rj99yov> <https://pbs.twimg.com/media/DRKMPmiWsAAUE6O.jpg>