hyperstack-org / hyperstack-org/hyperstack

Syntax for functional/static/pure components

Đang mở
#167 3 bình luận 1 reaction 0 người được giao Xem trên GitHub
discussion enhancement
Ngôn ngữ chính
JavaScript
Star
538
Fork
41
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

Currently we don't have any syntax in the DSL to define and then use functional components. We access native static components, but the DSL simply wraps them in a normal component.

What problems do react functional (static) components actually solve? Skim these articles and you will see its mainly to do with how relatively difficult it is to define a component in React, compared to a simple function.

https://blog.logrocket.com/react-functional-components-3-advantages-and-why-you-should-use-them-a570c83adb5e

https://hackernoon.com/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc

The Hyperstack DSL is already *far less verbose* than JSX.

If we rewrite the first example in the above blog post in Ruby its only 10 lines verses 21 for the functional component.

```ruby
class HelloWorld < HyperComponent
param :name
def say_hi
alert("Hi #{name}")
end
DIV do
A(href: '#') { 'Say Hi' }
.on(:click) { say_hi }
end
end
```

Furthermore, we have other ways to accomplish the same idea built into Ruby.

It's very easy to simply add instance methods to a component:

```ruby
class App < HyperComponent

def say_hi(name)
alert("Hi #{name}")
end

def hello_world_link(name)
DIV do
A(href: '#') { 'Say Hi' }
.on(:click) { say_hi(name) }
end
end

DIV do
INPUT(placeholder: 'what is your name?', value: @name)
.on(:change) { |e| mutate @name = e.target.value }
hello_world_link(@name)
end
end
```

and if we want separation of concerns we just move related methods to a module:

```ruby
module Utils
def say_hi(name)
alert("Hi #{name}")
end
def hello_world_link(name)
DIV do
A(href: '#') { 'Say Hi' }
.on(:click) { say_hi(name) }
end
end
end

class App < HyperComponent
include Utils
DIV do
INPUT(placeholder: 'what is your name?', value: @name)
.on(:change) { |e| mutate @name = e.target.value }
hello_world_link(@name)
end
end
```

In any real scenario the definition of a functional component is going to have to go someplace, and almost certainly be grouped with other components, so simply using mixin modules like the above is going to be the equivalent.

Finally here is a counterpoint to the whole functional component thing anyway:

https://medium.freecodecamp.org/7-reasons-to-outlaw-reacts-functional-components-ff5b5ae09b7c

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.