吉田  加奈

吉田 加奈

1598675640

Storybookリリース6.0 ライブ編集、Storybook Composition、ゼロ構成を備えたUIコンポーネントエクスプローラー

Storybookチームは先頃、Storybookのメジャーバージョン6をリリースした。Storybook 6.0は、構成不要のセットアップ、コンポーネント例のライブ編集を備え、同じコンポーネントエクスプローラーウィンドウで複数のStorybookの視覚化をサポートする (構成機能) 。

Storybookチームは、新しいStorybookの機能の採択について次のように説明した:

BBC、IBM、Cisco、Shopifyなどの企業の主要チームを調査しました。これらのチームは、コンポーネントライブラリのスケーリングに成功し、独自のベストプラクティスを開拓しました。

新しいStorybookには、これらのベストプラクティスが組み込まれているため、_すべて_のチームが利益を得ることができます。さらに、ボイラプレートと設定を削除して、デベロッパエクスペリエンスを合理化しました。

実際のところ、Michael Shilman氏はリリースノートで、構成の詳細を掘り下げることなくStorybookを起動して実行できることは、高度なユーザが望む機能のトップリストにあると主張した。Storybook構成の複雑さは、要求されたアドホック動作(アドオンなど)、ストーリービルドプロセス (Babel、Webpack、TypeScript構成など) 、ストーリーレンダリングのカスタマイズ、およびStorybookUIの必要なカスタマイズによって決まる。Storybook 6.0は、次のベストプラクティスの機能が事前に構成された状態で出荷されると主張している: Storybook Essentials (6つのプラグインのキュレーションされたコレクション) 、組み込みのTypeScriptサポート、および一般的なアプリケーションフレームワークのプリセット。

Storybook Essentialsには、ドキュメントを自動生成するためのDocs、自動生成されたダッシュボードでさまざまなコンポーネントの状態を調査するためのControls、コンポーネントのインタラクション動作を確認するためのActions、さまざまなデバイスビューポートに対するコンポーネントの応答動作を確認するためのViewport、さまざまな色とスタイルに対してコンポーネントを視覚化するためのBackgrounds、およびテーマやi18nなどカスタムツール用のToolbarsが含まれている。

提供されるプリセット (プロジェクト統合とも呼ばれます) により、開発者はReact (Create React AppNextRedwoodJS) 、Vue (NuxtVue CLIVuetify) 、Angular (Nx) 、Webコンポーネント (Open-WC) 、Ember (Ember CLI) でStorybookを使用できる。

#user interface #javascript #デベロップメント #programming

What is GEEK

Buddha Community

Storybookリリース6.0 ライブ編集、Storybook Composition、ゼロ構成を備えたUIコンポーネントエクスプローラー
吉田  加奈

吉田 加奈

1598675640

Storybookリリース6.0 ライブ編集、Storybook Composition、ゼロ構成を備えたUIコンポーネントエクスプローラー

Storybookチームは先頃、Storybookのメジャーバージョン6をリリースした。Storybook 6.0は、構成不要のセットアップ、コンポーネント例のライブ編集を備え、同じコンポーネントエクスプローラーウィンドウで複数のStorybookの視覚化をサポートする (構成機能) 。

Storybookチームは、新しいStorybookの機能の採択について次のように説明した:

BBC、IBM、Cisco、Shopifyなどの企業の主要チームを調査しました。これらのチームは、コンポーネントライブラリのスケーリングに成功し、独自のベストプラクティスを開拓しました。

新しいStorybookには、これらのベストプラクティスが組み込まれているため、_すべて_のチームが利益を得ることができます。さらに、ボイラプレートと設定を削除して、デベロッパエクスペリエンスを合理化しました。

実際のところ、Michael Shilman氏はリリースノートで、構成の詳細を掘り下げることなくStorybookを起動して実行できることは、高度なユーザが望む機能のトップリストにあると主張した。Storybook構成の複雑さは、要求されたアドホック動作(アドオンなど)、ストーリービルドプロセス (Babel、Webpack、TypeScript構成など) 、ストーリーレンダリングのカスタマイズ、およびStorybookUIの必要なカスタマイズによって決まる。Storybook 6.0は、次のベストプラクティスの機能が事前に構成された状態で出荷されると主張している: Storybook Essentials (6つのプラグインのキュレーションされたコレクション) 、組み込みのTypeScriptサポート、および一般的なアプリケーションフレームワークのプリセット。

Storybook Essentialsには、ドキュメントを自動生成するためのDocs、自動生成されたダッシュボードでさまざまなコンポーネントの状態を調査するためのControls、コンポーネントのインタラクション動作を確認するためのActions、さまざまなデバイスビューポートに対するコンポーネントの応答動作を確認するためのViewport、さまざまな色とスタイルに対してコンポーネントを視覚化するためのBackgrounds、およびテーマやi18nなどカスタムツール用のToolbarsが含まれている。

提供されるプリセット (プロジェクト統合とも呼ばれます) により、開発者はReact (Create React AppNextRedwoodJS) 、Vue (NuxtVue CLIVuetify) 、Angular (Nx) 、Webコンポーネント (Open-WC) 、Ember (Ember CLI) でStorybookを使用できる。

#user interface #javascript #デベロップメント #programming

Abigale  Yundt

Abigale Yundt

1599661800

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.

Multiple legos can be joined and yield another lego that can continue to be built on and attached to others. In functional programming, the basic unit for composition is functions and larger functions are built by connecting and combining smaller ones.

When asked how to handle a particular scenario, edge case, or requirement, a functional programmer will nearly always answer: ‘with a function’.

Object-oriented concepts like factories, strategy mangers, or polymorphism don’t have an equivalent in the functional paradigm. Functional programming has its own key concepts, composition is one.

A (quick) Aside

One distinction between functional and object oriented programming is best seen in the difference between

circle.area()andarea(circle). In the first version - a more object oriented style -areais a method that exists on theCircleclass and can only be called onCircleinstances. In the second,areais a function that accepts an object. Unlike the object oriented version, it can act on any object that conforms to the type expected byarea.

This illustrates a core difference between the two paradigms. In an object oriented world, data and functionality are coupled -

areais a function on instances ofCircleobjects limited to objects created by that class. In functional programming, data and functionality are decoupled -areais a function that can act on any object that has the required properties.

While object oriented patterns have interfaces, inheritance and other mechanisms for sharing behavior like calculating the area of various shapes, it can often feel like you’re standing in an abandoned abstract factory churning out reverse proxies* 🙃

*I’ve never written an abstract factory and this is just a cheeky line to maintain engagement. Like all things, OO is another tool to leverage when needed.

Forms of Composition

Functions are not the sole unit of composition and the principle extends beyond the domain of functional programming. ReactJS uses components as a unit of composition. Hooks too like

useStateare another unit. If you’re really focusing, you may notice that hooks are just regular functions which is why they are great for composition.

Its possible to build larger components from smaller components, and write custom hooks that extend the capability of existing hooks.

Composition relies on recursion to build larger abstractions from smaller abstractions but with each abstraction layer as the same type as all the others. Once a compositional unit like functions or components exist, you immediately get a compositional model that allows for building high level abstractions very quickly for free. Each layer of abstraction is fundamentally the same type of thing as all the other layers.

An Example of (Functional) Composition

Let’s begin with three functions.

const toUpperCase = str => str.toUpperCase();
const appendExclamationPoints = str => str + '!';
const split = str => str.split('');

Often code takes the output of one function and uses it as the input to another. This is the idea of a pipeline. Data in, data out.

split(appendExclamationPoints(toUpperCase('hello world'))) 
// ["HELLO", "WORLD!"]

While the above works, it isn’t the easiest to read. A simpler abstraction is a single function that can be invoked with some string passed as the parameter.

function appendExclamationPointAndSplitOnSpace(someString) {
    return (someString.toUpperCase() + '!').split();
}

appendExclamationPointAndSplitOnSpaceagic('hello world') 
// ["Hello", "World!"]

The above function, while meeting the requirements perfectly, isn’t necessarily clean code. It uses an imperative style, specifying each operation to perform to get the desired result. While it may be simple enough to read and understand, a more declarative style would be even easier.

Functional programming can help simplify the above through a helper function called

compose. Compose accepts an arbitrary number of functions, and returns a new function that runs each of the functions passed in such that the output of the previous functions is used as the input to the next

t appendExclamationPointAndSplitOnSpace = compose(
    split, 
    appendExclamationPoints, 
    toUpperCase
);

appendExclamationPointAndSplitOnSpace('hello world') 
// ["Hello", "World!"]

Note that the functions execute in a right to left wrapping manner similar to the original example. That is,

splitinvokes the result ofappendExclamationPointswhich invokes the result oftoUpperCase. This results in a declarative style, with no direct function calls or references to the data and methods that exist on the data type. A new function is created that accepts the data and computes the result. Most importantly, we’re able to build the new function from existing smaller functions that we already have or are trivial to write.

Composing functions requires adherence to the following intuitive rule. The output type of function A must match the input type of function B given that B runs with the output from function A. In a practical example, if a function that returns a number is composed with a function that expects a string, some unexpected errors might creep in.

Various implementations of

composecan be found in Lodash, Redux, and other JavaScript libraries. Its certainly not magical, and can be written in under 10 lines.

#functional-programming #javascript #reactjs #composition #pure-functions #compositions-in-javascript #compositions-in-react #javascript-top-story

What is Industry 4.0?Latest Trends, Technologies & Examples

https://www.mobinius.com/blogs/what-is-industry-4-0-trends-technologies-examples

#industrial revolution 4.0 #digital transformation companies #industry 4.0 services #industry 4. 0 technologies #internet of things #iot applications

Tyrique  Littel

Tyrique Littel

1600599600

Composite Design Pattern in Java

Here I am with another useful design pattern for you — the composite design pattern. I will try to point out the key features to remember while implementing the composite pattern for you.

Composite Design Pattern

The composite pattern is meant to “compose objects into a tree structure to represent part-whole hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly”

  • Composite design patterns describe groups of objects that can be treated in the same way as a single instance of the same object type.
  • The composite pattern allows us to “compose” objects into tree structures to represent part-whole hierarchies.
  • In addition, the composite patterns also allow our clients to treat individual objects and compositions in the same way.
  • Composite patterns allow us to have a tree structure for each node that performs a task.
  • In object-oriented programming, a composite is an object designed as a composition of one-or-more similar objects, all exhibiting similar functionality. This is known as a “has-a” relationship between objects.

#java #tutorial #design patterns #client #component #composite #composite design pattern

Aketch  Rachel

Aketch Rachel

1621014600

.NET 5.0 and C# 9.0 for Xamarin Developers

NET 5 has finally arrived and is one of the biggest releases on the history of .NET platform!

As the first phase on the unified view that Microsoft unveiled last year, we finally have a single platform for our entire application stack.

But what does this means for Xamarin developers?

Last may Microsoft announced .NET Multi-platform App UI (or MAUI for short); the future of Xamarin and Xamarin.Forms that makes Xamarin a first-class member of .NET. But, as this is such a big a change that it would not be able to be ready in time for .NET 5.0, so its postponed to version 6.0, expected to be released next year.

While we wait for MAUI and .NET 6.0, we have Xamarin.Forms 5.0 to look forward to in the immediate future. Including brushes/shapes support, swipe view, drag+drop, templating and much more!

The .NET team is also focusing its unification effort by bringing most of the .NET Core BCL implementation to Mono. This is exciting as we can take advantage of the optimizations in .NET 5 in the most recent versions of Xamarin.Android and Xamarin.iOS. This source code unification should be ready by .NET 6, when they will be named .NET for iOS and .NET for Android (and the Xamarin brand will be dropped 😬).

Well, for now I’ve talked about the invisible part, but there’s an important last piece that we can start using right now: C## 9.0! 🎉

C## 9.0

The latest installment of the language is not automatically enabled for Xamarin projects, but James Montemagno has done a great post explaining how to enable it while explaining the rationals behind language selection and availability.

But what’s good about C## 9.0? Well, there are lots of new features, some postponed from previous versions and finally made available. One of these new features is Record Types. This is a language construct that allows us to declare data objects that can easily be made immutable, like:

The example above declares a FeedEntry class that represent a blog post on a site feed. Notice the use of the init in place of set. This ensures that the property can only be set once on object creation. Records declaration also have a simplified syntax:

public record EntryAuthor(string Name, string Email);

This will declare an EntryAuthor record with the properties Name and Email. Then when creating new instances we can using the Target-typed new expressions:

Some developers prefers to have type annotation before the variable itself but like the conciseness of the var declarations. This new syntax allows for both and can also be used to initialize class fields and properties:

Last, but not least, suppose we need to set the published date on the instance we have created? Immutability is a concept from Functional Programming where we never mutate values on a object, but create copies with new values and we’re covered here:

Our initial record hadn’t declared the Summary property. By using the with expression on the previous record we could create a new instance with all the existing values and adding the summary.

#.net 5.0 #c# 9.0 #xamarin