![]() The best example of these concepts is the interaction between the following components: ![]() ![]() Parent components manage child state and communication between children.Child components don't know anything about their siblings.Child components don't know anything about their parents.The State keeps track of the CurrentPage but it will never update it by hand: the CurrentPage is only updated in response to url changes and these changes will dispatch a message to change the value of the CurrentPage along with dispatching other messages related to loading the data for the component Important Concepts: Data Locality and Message Interceptionįollowing these principles to help us write components in isolation: Pages represents the current page and sub pages that a component can have.Msg type that represents the events that can occur.State data model that the component keeps track of.You will often see calls made to server from the client like these:Įvery component comes with a Types.fs file that contains mostly three things Thanks to Fable.Remoting, this application does not need to handle data serialization/deserialization and routing between client and server, it is all done for us which means that the code is 99% domain models and domain logic. UpdatePassword : SecureRequest -> SecureResponse > } TogglePostFeatured : SecureRequest -> SecureResponse > UpdateBlogInfo : SecureRequest -> SecureResponse > SavePostChanges : SecureRequest -> SecureResponse > GetPostById : SecureRequest -> SecureResponse > TurnArticleToDraft : SecureRequest -> SecureResponse PublishDraft : SecureRequest -> SecureResponse ĭeletePublishedArticleById : SecureRequest -> SecureResponse SavePostAsDraft : SecureRequest -> SecureResponse ĭeleteDraftById : SecureRequest -> SecureResponse PublishNewPost : SecureRequest -> SecureResponse GetDrafts : AuthToken -> SecureResponse > To understand how the application works and what it does, you simply take a look the protocol between the client and server: react-responsive for making the app responsive.react-marked-markdown for rendering markdown.react-event-timeline for a timeline view of the blog posts.Elmish.SweetAlert for simple and sweet elmish dialogs prompts.Elmish for building the client architecture with react.Elmish.Bridge for real-time type-safe messaging in an elmish model.Fable.Remoting for type-safe communication.Jose for generating secure JSON web tokens.Serilog for logging through Suave.SerilogExtension.LiteDB as a lightweight embedded database through LiteDB.FSharp.Realtime type-safe messaging via web sockets.User security: authentication and authorization.Message interception as means for component communication.Using third-party react libraries via interop.This application features many concerns of large apps such as: Specifically made as a learning resource when building apps with the SAFE stack. A minimalistic real-worldish blog engine written entirely in F#.
0 Comments
Leave a Reply. |