59541
I saw an interesting front-end framework today: https://www.ripplejs.com/, its slogan is as follows:The Chinese translation is: Ripple is a TypeScript UI framework that combines the advantages of React, Solid and Svelte. Because I find it interesting, I’ll post the code example from the official website.: import { Button } from './Button.ripple'; import { track } from 'ripple'; export component TodoList({ todos, addTodo }: Props) { <div class="container"> <h2>{'Todo List'}</h2> <ul> for (const todo of todos) { <li>{todo.text}</li> } </ul> if (todos.length > 0) { <p>{todos.length} {"items"}</p> } <Button onClick={addTodo} label={"Add Todo"} /> </div> <style> .container { text-align: center; font-family: "Arial", sans-serif; } </style> } export component Counter() { let count = track(0); let double = track(() => @count * 2); <div class='counter'> <h2>{'Counter'}</h2> <p>{"Count: "}{@count}</p> <p>{"Double: "}{@double}</p> <Button onClick={() => @count++} label={'Increment'} /> <Button onClick={() => @count = 0} label={'Reset'} /> </div> } You can write any js code between tags, especially this code:<ul> for (const todo of todos) { <li>{todo.text}</li> } </ul> I think it's very elegant. If you switch to react, you would write like this:<ul> {todos.map((todo, index) => ( <li key={index}>{todo.text}</li> ))} </ul> It’s so convenient! ! ! After looking through the github repository, the author has started developing it in the past two weeks, and now the prototype is already there, which is very respectable! ! ! ![]() In addition, the author’s own title is also very impressive: ![]() In terms of quality, this framework should not be bad, so I am still very much looking forward to its subsequent development. By the way, because this warehouse has just been built, if you are interested, you can learn from each submission of the author. I think if you really study it in depth, you will gain a lot. The best parts combined into one package. |