Any recommendations for customized web application?

[LindaM]

I would like to create some customized web map application like the following:

https://maps.simcoe.ca/public/

I have explored all the ESRI AppBuilder Builder (Developer Edition) sites. But I still have no clue where to start. I am at intermediate level of JavaScript and ESRI JS API; Beginning level of CSS, HTML, and Dojo.

 Is there any tutorial/reference books that can teach these skills as a whole system, like step by step?  For example, I could not find any dojo AMD tutorials online; the dojo official website provides very hard-understanding articles. Thanks!

[RobertScheitlin__GISP]

Linda,

    The simcoe canada site is a HIGHLY customized site done my VERY experienced developers that are not just learning dojo or templated widget development (this would be like some one that never exercised before say that they are doing to do a triathlon tomorrow). There are not going to be any better sites to lean dojo AMD then what the official dojo site provides. If you want to learn widget and or theme development then you will have to invest the time and effort into going through the Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer...  and other samples on the WAB Developer site. Word of advice is to forget about what your objective and desires are for your site and just focus on learning the basics by following the samples. Once you learn things like what dojo lang.hitch and how to maintain code scope, then you will need to learn abouth things like this.own and how to reference dom elements in the widgets template (and the fact that you need to forget about byId that you are use to in normal JS code). The best way to learn in my opinion (only ever being self taught) is to look at existing code from the otb widget and try to understand (by walking through the code) how it works (each function and the workflows). 

[BillChappell]

I found Manning | ArcGIS Web Development  to be very helpful as I played and modified a copy of  GitHub - cmv/cmv-app: A community-supported open source mapping framework built with the Esri JavaSc...  .It's not an easy read but does go into a lot of detail.  However my current tasks are to create simple focused apps instead of complete do all solutions, and I was surprised to find I could do most of my mapping with Leaflet using the Esri plugin without touching Dojo.

[Drew]

Linda,

Some tips I can provide are:

1. Really understand how to find and read the online documentation for the ESRI JSAPI and Dojo.
   1. This helps you not reinvent the wheel when coding
2. Start small, and create a few widgets for the base WAB. Our maps.simcoe.ca site(s) have over 1 year of work into it. Its not a small task as there is a lot of back end systems and programs to make it happen.  The front end is JS but there is just ask much work done in the back end to make things happen.
3. Learn how to create on screen widgets
   1. All of the UI you see on maps.simcoe are essentially on screen widgets plugged into a WAB theme
4. Think 'reusable' JS code - We write other helper classes to help widgets get the job done. 
   1. This can all be done in dojo
5. Think 'reusable' CSS
   1. To keep the look and feel the same we have a base css classes all our widgets can utilize.
6. Only use AMD
   1. no more dojo.foreach or dojo.byid
7. Understand the entire config.json file for the WAB
8. Use the out of the box widgets as a learning tool. All the code is there for you to see how things are done.
9. To Start....
   1. Download the WAB
   2. Create a bank App using the UI
      1. Maybe add a few widgets
   3. Find that app under 'arcgis-web-appbuilder-2.0\server\apps\' {some number}
      1. I re-name the number to 'dev'
   4. Open 'dev' into Visual Studio or your favorite editor and browse the folders and files...
      1. Start to understand the structure

Drew

[LindaM]

Thank you all for your great information! Very helpful!

[ChristinaMcCullough]

I would highly recommend using Tim McGee‌'s cmv-wab-widgets template.  It is very modular like the Flex Viewer.  I am able to use CMV and WAB widgets.  I have several Flex favorites from @rcheitlin and many more from the CMV community.  There is a learning curve coming from Flex to JS, but it is a lot less painful than starting from scratch.

GitHub - tmcgee/cmv-wab-widgets: Examples of using widgets from the ESRI WebApp Builder in CMV 

Configurable Map Viewer · GitHub 

Enjoy!