 So, myself is Kunjan Dalal and I am also known as Kunji, so friends and Twitter people knows me as Kunji and I will be skipping other part of intro because we are having less time, so we need to run. So, oh what happened, oh sorry, okay, so this is the agenda for today, so this talk is basically designed for 45 minutes but as there are the good talks on same topic, so it cut down to 20 minutes and because of that I am cutting down few of the stuff, you may or may not be knowing but we will try to cover it after talk, so if you any question is there just let me know, not between the talk after the talk. Let's start with the pop quiz, so first question, how many of you already know Elm, have used it, okay, how many of have used it in application, production level application in the project, there are two people, great. Now, this is the important question, how with you guys, how many time it happens that you seen a cool demo in a conference and when you go back to your work, you can't convert that demo to a proper application, like there is a cool thing happening for 1 hour 45 minutes and you go back, you try to re-implement that stuff and it didn't work out, oh every time demo works out, that's great, okay, so today we are not going to see demo, instead we are going to see something from the history, so it's not about what is possible but it is all about what can be possible, so what is already become the history, so I will be talking from my experience, the core sample will be in Fsharp because Fsharp is like general purpose programming language, it has strongly type nature and it works for web and mobile servers, machine learning, anything you name it, you might find Fsharp working there. There is two things for Fable and Fable Elmish or in general purpose we talk as Elmish, Fable is basically Fsharp to JavaScript compiler powered by Babel, so basically it takes the Fsharp converge to AST and provides to Babel, Babel take that thing and converge to JavaScript and Elmish is a abstraction layer or a library written in Fsharp to give Elmish style architecture to Fsharp code, so basically if you want to create Elm, Elm style applications with Fsharp Elmish, Elmish is the library to do that thing, we check out the code for both, let's start with the Fable first, so here is the simple Fsharp unit of measure code, so you provide the unit of measure to your types, so which is basically Fsharp specific code, so this type of units you can give to your code and it will be very helpful when you are working with finance, research or biology because it will not allow other types to compare or do the algebraic addition or subtraction, means you can't compare meter with the fit if you are giving a type, when you convert this to a JavaScript using Fable it becomes very dynamically type JavaScript language, this is generated JavaScript code, it generates ES6 code I guess which is more readable than what browsers can execute, then you pass this to a Babel and it will convert this to a enable JavaScript and it will run your application, let's talk about the Elmish, this is your routine model, so this is similar to Elm, you have the model which has a property of value, which of type string and then there is a message which is of change of value of type string, this is your state init function which initialize the value as a empty string and updates function which takes the new value and update the value with the new value and this is the view which can show your model in a view html view, you are writing this kind of html Elm as well and it will dispatch the event to the update method which eventually change the model and again updated model which shows the value and the view, so I guess this is very much what we do in Elm, so there is no much of a difference there, this is the wiring up, the same thing we are doing in Elm also, so you can wire it up and this is the program with react Elmish dash app is a div tag or div id which we take and run whole application in that div, so any questions still now miss, anyone feels that this is not similar to Elm because it is very much, I learn Elm first and then move to Elmish, so let's go little deeper, what is spa, anyone can explain me what is spa, yeah oh that not the spa in salon, the single page application, what they promise is you don't need to learn any other thing other than html JavaScript and CSS, nothing else, it will give you that most powerful geometric diagram or triangle which is nothing, you learn that html JavaScript CSS and nothing else you need to learn, but what really happen when you learn spa, be it AngularJS or ReactJS or any other libraries, you have to learn many angles, there are too many things so seriously, this thing also happens with spa, yeah there is no full screen mode, that's nice, okay so anyone recognize who is this, that's me from the future, so today I will be providing tips and tricks and you have to just take it for granted because just like you take every words for granted from old wise man, so that is what it is, this is from experience and when you get experience you have wrinkles, so we will be talking about model view update architecture, the ALM structure or the ALM architecture, so I strongly feel that in MVU architecture, model is the most important thing because model is the message between update and view function, so if you are controlling the message, you are controlling the narration, that's the message tearing down, getting tear down, so I will start my tips and tricks from the model itself, how you model the applications and obviously how you model the model of model view update method, let's talk about the model, okay so if you are having any kind of authentication and I hope many of the application having that authentication structure, please divide your application into two part, one part where you need to be getting authenticated and one part you don't need to be getting authenticated, so I normally start my application this way only, so it is having only two message, two page model in option type either application or authentication and then model will be having user token which is having token or a token detail and then the current page and the page model, why I tell you, can you see the line number 10 or 1011, where I am checking the user token is none, so what happened when I was writing the application, I started with simple thing like login page should not check the user and other page should check the user, but that other pages start growing 10, 15, 25, so that user token is not none started growing again and again, so that is a repeated code I stack and the page grows like anything, so it is better to reflect from where you start if you are having any kind of authentication in that, in your application for two, three pages it is fine, but more than 10, 15 pages or 25 pages it is better to get refactored and one prototype if we are not using JWT please use it, it is good for a stateless applications JWT is JavaScript web token, sorry, page model, so in that application and authentication if we are going deep for a page, this is how I normally like to define a page model, so there is a bad page model, so in bad page model what happened is like you load all the pages at one shot, you are going into application after authenticating a user and then every application is getting loaded, so in good page model only that those pages are getting loaded which is you are seeing in the screen, so I started that way, I am loading almost everything calling every API, it is asynchronous, it do not hurt, but soon your application started growing and it can go to the 7 or 8 level deep, so when you are changing the model it becomes a issue, so instead of that if you are taking the option type of it, it will only update the model which is required to be updated, this is a page model, so when you are on some page how you want to define your components, so I normally like to divide components in a separate components, so if you are having a page with a single big form also, I take 4 entries, 4 entries, 400, I take a group of 4 randomly, give a random name, but make a smaller chunk, it will make a later code easier, a simple example if you are having a auto complete, auto complete based on a server API, so then you have to write client code and server code both, so it is better to abstract that component away instead of writing in a same file even just because it is a same page, you have to abstract that away, even if there is a username authentication, that username should be valid based on some rules and regulation and username should also be available on server, so you are doing server call and also a client call, so again that username, even though it is a simple text book, it should be abstracted away, component model, so now we are very much narrow down to a simple component, a simple piece of the page, we are almost halfway, if anyone like to take a break, I will just drink it, we already take a break right, okay, before we talk about the component model, let's talk about the domain driven design, anybody heard about domain driven design here, anybody using it in an application or anybody can say that they are using it right way, so if we can use domain driven design on server side, why can't we use in domain driven design in client side, it is very much possible, I started my application this way, so there is a validated type then there is a person type, person error type and my model looks like person is a person then person error, off type person error, this is very dumb implementation of domain driven design or how you represent a domain, so if a person is a domain then you have the error, so whenever you are saying the person of person type should be very much valid only, so but what happened when I am using with the ALM or ALMS way, when I want to update that first name should not be empty, a simple error message, I have to go through person error, then validate and then message, it's like three or four level deep, just to update a simple model, it becomes more complicated when you are using this kind of types or record types either in ALM or F sharp, so how can you solve that problem, we can use lenses obviously, it is available in ASCAL, lenses are available in ALM also it is available in F sharp, but if you have to use lenses to update your record type then definitely you are doing something wrong, so it is very much a good time to update the application structure, I use lenses and then I spend like four to five days just refactoring the whole code for not to use lenses, because one point of time lenses become more complicated to code with and also become slow, so I just flattened the model in a separate component, so there is a first name of first name component and last name of last name component, so first name can have their own separate update method which change the error or first name value and last name also can have separate component which change the error message and value or you can do this way also, I just flattened straight away first name and first name error stays in a model, so I normally go with the rule that a model should not go more than one level deep or lenses should not be there in your ALM or ALM mislibrary, you can use it, but even the creator of lenses in ALM the event says no, if you are using lenses you are doing something wrong instead start changing your code in a model view fashion, let's talk about the command the state part, single responsibility principle normally whenever we do to-do list or a to-do list or any simple sample application, we don't go this way but this is more a useful way, if you are changing something here I am converting string to upper, I am not updating model in the same command, if you are doing something then do one and only one thing in that command itself, so change value is for converting that string to upper then I am sending message to a change, so it happens it authenticated and then I am updating the value, so normally I go this way, command I take a command to do something maybe a poster value to API or changing something on a client side and if it validated the command is valid then I will move to the event or call change that okay now update the model everything is validated it is event that happened, so now you can update the view, if you update the view another way to look at this is like you separated with the command and events, so command will return only unit type it will generate another message which will eventually update the model and which will eventually update the UI, so if you know CQRS it is mostly happen this way command do not generate the events it will not change the state but event do just remember this slide specifically because it will be useful in future just two slides after two slides I will talk about this again and you can wire up command and event this way it is a simple wire up so yeah sure, subscribe this is the least used feature when it comes to I have never seen that much of use of this thing, subscribe is there to use please use this is very default example of subscribe you can subscribe to a clock to tick every second and then every second it will change the model this is kind of real-time use of subscribe you are dispatching an event based on the real-time or reactive input you are getting from the server be it server sent event or a socket, so here if you are changing your commands into command and events it will be useful because command just validate everything on a client side it will go to the call the API go to the server validated again generator event event comes via socket push from the server to client and from here using subscribe you can update the model so it is it becomes more of a reactive application let's talk about the view this is my favorite part, views will be simple and cute like as small as possible and as cute as possible here I am just doing one thing document table only so there is nothing much more into view but I like to keep root as simple as possible see if someone is reading the root it should get whole idea of the page so if there are more than one thing it should be like that even I can remove the document table and put the whole HTML code in the root but instead of that just keep it abstracted and writing instead of writing commands okay this is table code make a separate function and give the proper name so it will always easier to go to that view part and change it later use CSS wrappers okay this is very useful when you are writing big projects instead of writing classes you can easily create wrappers to write those classes for you so you will not have spelling mistakes in CSS class which normally happens for at least person like me who don't like CSS and you can cut the code like anything so I have seen like 75% of reduction in my code after using wrappers so you don't have to go nested du du du and write classes and then go through that again based on a framework this is fulma is a wrap around the bulma CSS and I never seen a bulma CSS I just go to the fulma documents and use it why I choose the elm instead of elm one language for server client beat web mobile data science machine learning data processing I have done almost everything I written there so I would work with web mobile I have done data science thing I have done machine learning and data processing beat server or web a possible to leverage the library fable provides you a bridge between JavaScript and app shop so even you can access dynamic part of JavaScript without any issue even the in same code you can write function in JavaScript you can access in a app shop you write function in app shop you can access in JavaScript possible to leverage react libraries there are a lot of libraries which is already created so instead of letting it go I can use it easily with my almas architecture because of all this I can use the acquired knowledge throughout the years so basically it's almost 11 years in software so learning new things doesn't mean that I should forget all about things so whatever libraries and whatever names I know beat react or beat any other libraries I can use it easily this is react lift that code if you can see the code so it is basically a library to create maps and this is the app shop album code I'm writing and this is the result you can create maps easily so we are not we don't have to create whole library altogether just to support maps there is awesome tool chain available this is html to elmish which is same as html to elm that is available you give the html code it will convert to the elmish code there is another good thing is TS to TS to fable so you give the typescript definition it will convert the app shop definition for you so you can use any typescript definition it will convert for you it will convert that thing to app shop so you can easily use it in elmish project without any issue so any JavaScript library you can use it including jQuery I have seen but not with elmish with the fable so I guess oh please here thank you that's done from my end these are the links there is a awesome fable which I am maintaining safe stack is a complete stack like means stack you it will generate the server side shared code and client side code for you which will be having a server side refresh so if you change the server side code it will refresh the whole thing if you change the client side code it will do hot reload for you all thing will be set up you can share code you can share the domain part you can share the validation thing you can do railway oriented programming on both side I have done that what the app shop elmish this is the talk where me and the creator of fable was talking about elmish so you can listen to that talk fulma is a rapper I have already told baler is another thing launched two days back which convert your elmish code to the web assembly so you can if go even more native to that browser and fable you already know just check out the repo you can run app shop code without any internet so it runs company app shop code in your browser and this is the consulting I started recently right now there are not much people this is the fable compiler twitter handle and me so if there is any comments good comments you can tag the fable compiler bad comments you can tag me I always try to improve that thing questions we don't have time I guess sure it's to the only we can cut his time any questions I'll be here for today and tomorrow just let me know and thanks