Differences

This shows you the differences between two versions of the page.

--- ra:frontend [2018/08/23 14:51]
koubel created
+++ — (current)
@@ Line 1: / Line 1: @@
-There are many frontend technologies in old application. WebForms, DevExpress webforms, DevExpress MVC with ScriptSharp and jquery. DevExtreme as javascript solution. React
-====== Webforms ======
-Some pages are as webforms (*.aspx), or webforms controls (*.ascx). For both Id element attributes are very necessary. These are mostly as properties in code behind.
-    <asp:Label runat="server" ID="lblRom" meta:resourcekey="lblRomResource1" Text="ROM: "></asp:Label>
-Most components are from devexpress package
-    <dx:ASPxComboBox Width="100%" ID="ddPHMDivisionSelect" runat="server"
-       DataSourceID="DSPHMDivision" ValueField="Item1" TextField="Item2" Text='<%# Bind("DivisionIdText") %>'>
-    </dx:ASPxComboBox>
-Data for controls are bound to particular (mostly static) class and method mostly via DataSourceID attributes, for our comboBox above, definition for data source class is
-    <asp:ObjectDataSource ID="DSPHMDivision" runat="server"
-       SelectMethod="GetDivisionsDS" TypeName="PSAS.Business.PHM.CacheManager">
-    </asp:ObjectDataSource>
-Webforms has some limited html like markup for e.g. conditions, call methods e.g. Component usage is prefered.
-Examples:
-Gridview with edit form with hidden field for special usage of updating, inserting rows. Input in row without binding - [PR](https://protank.visualstudio.com/_git/PD/pullrequest/1361?_a=files)
-====== DevExpress MVC ======
-All elements with their names are processed by some devexpress global JS and these are in accessible in JS a global variables.
-Sometimes, devexpress controls are in DOM (via server sider rendering) condtionally. It's necessary use [[https://protank.visualstudio.com/_git/PD/pullrequest/1402?_a=files|check]] for checking of undefined type.
-Fo ajax forms, it's necessary to preserve correct binding for server side calls. HTML elements names must be same as properties
-on serve side. When the name of DevExpress control is changed e.g. DevExpressConrol.Name property for combo box in Razor/HTML. It's necessary use other field - mostly hidden field - to store value of original control. This hidden field value must be updated when original combo box value is changed, mostly via DevExpress change event. Example [[https://protank.visualstudio.com/_git/PD/pullrequest/1396?_a=files|fix for road office]].
-====== React ======
-Calling the API: there is some controllers on server side. It's necessary to make changes in DTOs on server and client.
-  * makes the changes on server side first (some DTOs)
-  * build the assembly
-  * call NSwaggerStudio, load the config from Application/PSASWeb/Areas/API (e.g. CoreServiceNSwagConfig)
-  * regenerate C#, typescript clients
-  * call the clients from the mobx state objects
-Most of src is ''Application/PSASWeb/React/src'': stores - for states and business logic, components, for components. TSX files are mostly for html. For hot reloading is necessary in this dir call ''npm run dev''. ''npm run build-dev'' builds files.
-In browser, source map works, try to CTRL + SHIFT + f for searching function/method call. Sometimes it's necessary to call `npm install` mostly when builds return error message about missing package e.g.
-    ERROR in ./src/node_modules/pd-client-controls/PDFormElements/PDMaskedInput.tsx
-    Module not found: Error: Can't resolve 'react-maskedinput'
-  * All event processing is through event component props which update mobx state via actions. Some actions are called only via one method. So copy state object is necessary.
-  * Form validation is according refs. Input components needs to have 'ref' prop, 'required' prop, and validate prop for own validation
-See some react related tasks for more information and examples.

Mira Wiki

User Tools

Site Tools

Differences

Page Tools