Developing Web Apps with ArcGIS API for JavaScript / Building Applications Using the ArcGIS API for JavaScript Resources

[#1]

Note: This resource list is for all versions of the instructor-lead course on the ArcGIS API for JavaScript.

Esri Resources

• Esri.com – Esri’s primary website. Provides product information plus links to training, services and support.
  • Training – Esri Training gateway for instructor-led and virtual training
  • Esri blogs – Esri Insider   ArcGIS
• Esri Support – Esri's  support center
  • GIS Dictionary
  • ArcGIS Ideas
• GeoNet – The Esri Community
  • Esri Training
  • Discussions Lobby
• Learn ArcGIS – Self-study learning about GIS through hands-on projects.
• Solutions
• Marketplace

ArcGIS for Developers

• Home
  • Documentation
  • Subscription plans
  • Developer community
• Esri on GitHub
• ArcGIS API for JavaScript
• REST API

Web Application Builders / Viewers

• Web AppBuilder for ArcGIS (Developer Edition)
• ArcGIS web application templates
• ArcGIS  > Create apps
• Story Maps ^New

• ArcGIS Viewer for Flex [Deprecated]
• ArcGIS Viewer for Silverlight [Deprecated]

ArcGIS for Server

• Home
• Help
• Product information
• Functionality matrix – ArcGIS for Server functionality by license level
• System Requirements – Windows  Linux
• Install guides – Windows  Linux

ArcGIS for Desktop

• Home
• Help
• Product information
• Functionality matrix
• System requirements – ArcGIS for Desktop  ArcGIS Pro
• Install guides – ArcGIS for Desktop  ArcGIS Pro

ArcGIS  / ArcGIS  for Organizations

• Home
• Help
• Product information
  • Service credits overview
  • Public account

Earlier ArcGIS Releases

• ArcGIS Resources – Help and software resources for prior ArcGIS releases
• ArcGIS Help
  • ArcGIS 10.2.2, 10.2.1, 10.2
  • ArcGIS 10.1, 10, 9.3, 9.2, and 9.1

Esri Training

Seminars

• Time-Saving Tips for JavaScript Developers
• Data Visualization with the ArcGIS API for JavaScript
• Using HTML5 with ArcGIS
• Achieving Interoperability Using ArcGIS and OGC Standards
• Get Started with Web AppBuilder for ArcGIS

Web Courses

• Introduction to the ArcGIS for Server REST API
• Creating Web Applications Using Templates and Web AppBuilder for ArcGIS ^New

Esri Conference Proceedings Videos

Esri video web site

• E380 – Esri Video covering GIS events, products, people and topics
• E380 > JavaScript – JavaScript specific videos

2015 Esri User Conference ^New

• Introduction to the ArcGIS WebApp Builder: JavaScript Apps Made Easy
• Customizing and Extending ArcGIS Web App Templates
• Getting the Most Out of ArcGIS Web App Templates

2015 Esri Developer Summit

• JavaScript specific sessions
• Technical Workshops
• User presentations

2014 Esri International User Conference

• Intro to the ArcGIS API for JavaScript
• What's New in ArcGIS API for JavaScript
• ArcGIS API for  Mapping and Visualization
• Optimizing Your JavaScript Web App for Performance
• ArcGIS WebApp Builder: An Introduction
• ArcGIS WebApp Builder: Customizing and Extending
• Rethinking How You Style Your Web Maps
• Strategies for Building Mobile Apps Using ArcGIS API for JS
• Customizing and Extending ArcGIS Web Application Templates

2014 Esri Developer Summit

• Building Mobile Web Apps with ArcGIS API for JavaScript
• JavaScript Tooling: Love Your Development Workflow
• Introduction to ArcGIS API for JavaScript
• Modular JavaScript
• Building Apps: Using ArcGIS API for JavaScript

2013 Esri International User Conference

• Getting Started with ArcGIS API for JavaScript
• Advanced Development with ArcGIS API for JavaScript
• JavaScript - Learning to Love Again
• How I Work: Utah AGRC JavaScript Boilerplate Project Tour

2013 Esri Developer Summit

• Debugging Applications Built with ArcGIS API for JavaScript
• Strategies for Building Large JavaScript/HTML5 Applications
• Working with Application Frameworks and ArcGIS API for JavaScript
• The ArcGIS REST API

• ArcGIS JavaScript API: Basics for Developers

Resources

ArcGIS API for JavaScript

• Esri’s Roadmap for Web Developers – ArcGIS Blog, 02/21/2014
• ArcGIS API for JavaScript – Concepts, API reference, and samples.
• ArcGIS Blog > JavaScript
• Esri on GitHub > JavaScript
• ArcGIS API for JavaScript Web Optimizer

ArcGIS API for JavaScript - Books

• ArcGIS for JavaScript Developers by Example, Jayakrishnan Vijayaraghavan and Yogesh Dhanapal, Packt Publishing, 03/2016 ^New
• ArcGIS Web Development, Rene Rubalcava, Manning Publications, 11/2014
• Building Web and Mobile ArcGIS Server Applications with JavaScript, Eric Pimpler, Packt Publishing, 02/2014
• Building Web Applications with ArcGIS, Hussein Nasser, Packt Publishing, 11/2014
• Developing Mobile Web ArcGIS Applications, Matthew Sheehan, Packt Publishing, 2/2015
• Mastering ArcGIS Server Development with JavaScript, Ken Doman, Packt Publishing, 9/2015 ^New

ArcGIS API for JavaScript - Download

• Get the ArcGIS API for JavaScript
• ArcGIS for Developers Downloads page
• HowTo: Install the JavaScript API for use with ArcGIS 10.2 for Server

ArcGIS

• ArcGIS for Server 101 (ArcUser, 2013)
• Portal for ArcGIS 101 (ArcUser, Winter 2014)
• The Platform for Success – GIS for Everyone (ArcUser, Spring 2013)
• Discover, use, make, and share maps from any device, anywhere, at any time ^New
• Apps for Everyone ^New

ArcGIS  and sample servers – Services Directory

• ArcGIS
• Sample Server 1
• Sample Server 2
• Sample Server 3
• Sample Server 4
• Sample Server 5
• Sample Server 6
• TMServices1

ArcGIS Rest API

• Rest API
• Services from Esri

ArcUser - JavaScript

• No Programming Required - Create web apps rapidly with Web AppBuilder for ArcGIS (Summer 2015) ^New
• 10 Open-Source Projects Every JavaScript Geo Dev Should Know About (Spring 2014)
• Mobile Media Friendly (Winter 2013)
• Data Visualization with ArcGIS API for JavaScript (Fall 2014)

Asynchronous Module Definition

• Why AMD?
• The abc’s of AMD – Esri Blogs
• AMD tutorials at Dojo Toolkit – Hello Dojo!, Modern Dojo, Introduction to AMD Modules, Advanced AMD Usage

Blog Articles

• ArcGIS > JavaScript
  • 3D visualization: Using attributes to represent real-world sizes of features [2/1/2016] ^New
  • 3D visualization: working with objects, paths, and extrusion [1/25/2016] ^New
  • 3D visualization: working with icons, lines, and fill symbols [1/19/2016] ^New
  • Multivariate Rendering – 2D visualization techniques in JavaScript [1/11/2016] ^New
  • Using Bower for custom builds of ArcGIS API for JavaScript [11/13/2015] ^New
  • Data Visualization with ArcGIS API for  Show Data by Size [12/1/2014]
  • Data Visualization with ArcGIS API for  Show Data by Color [10/10/2014]
  • Data Visualization with ArcGIS API for  Enhancement Options [9/24/2014]
  • Data Visualization with ArcGIS API for  Show Data by Unique Value [9/11/2014]
  • GeometryEngine part 1: Testing spatial relationships and editing [9/9/2015] ^New
  • GeometryEngine part 2: Measurement [9/16/2015] ^New
  • GeometryEngine part 3: Overlay analysis [9/23/2015] ^New
  • Data Visualization with ArcGIS API for JavaScript [9/5/2014]

• Esri Support Services Blog
  • Setting up a Proxy [4/7/2015]
  • How to Plan a Great Map Event [12/8/2014]
  • JavaScript Events – Advocating for On Style Event Programming [9/29/2014]
  • JavaScript Debugging Tips Part I – Google Chrome and the Network Tab [5/6/2014]

Books & Videos – HTML, CSS, JavaScript

• Dive into HTML5 by Mark Pilgrim (free) – See Dive into HTML5: In Memory of Mark Pilgrim or Dive into HTML5 Doctor for download options
• Eloquent  A Modern Introduction to Programming by Marijn Haverbeke (free)
• Crockford on JavaScript – Eight part video series by Douglas Crockford
• The Good Parts by Douglas Crockford, O’Reilly, 2008
• GitHub > getify > You Don’t Know JS – This is “a series of books diving deep into the core mechanisms of the JavaScript language.”

Browser Compatibility

• Can I Use – Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers
• Browse Happy – Find out the latest versions of the major browsers – Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer.

Browser console tutorials

• Firefox
  • Firefox Developer Tools > Debugging > Web Console
  • Debugging JavaScript
• Chrome
  • Using the Console
  • Chrome Dev Tools
  • Introduction to Chrome Developer Tools, Part 1
  • Explore and Master Chrome DevTools free seven-part video course from CodeSchool ^New
• Internet Explorer
  • Using the F12 developer tools
  • Inspect running JavaScript with the Debugger
• Treehouse Blog > Mastering the Developer Tools Console (1/27/2014)

Collaboration tools / Sandboxes

• jsFiddle.net
• jsbin.com
• CodePen
• ArcGIS API for JavaScript Sandbox

Debugging

• W3C Markup Validation Service – Checks markup validity of web documents in HTML, XHTML, and other markups.
• W3C Validation Service – Checks Cascading Style Sheets (CSS) and (X)HTML documents with style sheets
• JSLint – a JavaScript code quality tool, Wikipedia entry, GitHub douglascrockford/JSLint
• jsHint – a JavaScript code quality tool, Wikipedia entry, GitHub jshint/jshint
• Firebug – Web development tool for Firefox
• Fiddler – Free web debugging tool for any browser
• FreeFormatter.com – Testing tools, including “several formatters, validators, code minifiers, string escapers, encoders and decoders, message digesters, web resources and more.”
• Blog > Julie Pagano > JavaScript Debugging for Beginners

Dojo

• Dojo Toolkit
• Tutorials
• Reference Guide
• API Documentation

GeoNet Places 

• ArcGIS API for JavaScript
• ArcGIS REST API
• ArcGIS Server with JavaScript API
• Web AppBuilder for ArcGIS
• Web AppBuilder Custom Widgets
• ArcGIS  Templates

JavaScript Coding Guidelines / Style Guide

• Blog > Addy Osmani > JavaScript Style Guides and Beautifiers
• Crockford > Code Conventions for the JavaScript Programming Language
• Dojo Style Guide (Community)
• Dojo Style Guide (Documentation)
• Google JavaScript Style Guide
• MDN > Developer Guide > Coding Style
• Typo3 JavaScript Coding Guideline

IDE/Editors

• Aptana Studio
• Brackets
• NotePad++
• Sublime Text
• WebStorm

JavaScript

• Douglas Crockford > JavaScript
• Code Conventions for the JavaScript Programming Language
• JavaScript Garden

Libraries

• Raphael – a “small JavaScript library that should simplify your work with vector graphics…” Check the Add graphics to a map sample to see how you can use the Raphael library for marker symbols.

Planning Tools

• FreeMind – free mind-mapping software
• Pencil Project – open-source GUI prototyping tool

Proxy

• Setting up a proxy from Esri Support Service Blog
• API Guide > Using the proxy
• GitHub > Esri / resource-proxy

Symbology

• ColorBrewer – Selecting color schemes for cartography
• Adobe Color CC – Selecting color schemes

Testing

• Karma – Low-level unit testing

Tools & Utilities

• AMD Require Generator at GitHub
• ArcGIS Server Administration Tookit – 10.1+
  • Downloadable tools for ArcGIS Server administration (ArcGIS Blog)
• PerfQAnalyzer
  • Esri Support Services Blog > Calibrating ArcGIS Performance with PerfQAnalyzer: New Build Available for Download
  • Esri Support Services Blog > PerfQAnalyzer: Build164 Available for Download

Tutorials on JavaScript, HTML, CSS, and DOM

• W3Schools.com
  • HTML tutorial & HTML tag reference
  • CSS tutorial & CSS reference
  • JavaScript tutorial & JavaScript reference

• Mozilla Developer Network (tutorials)
  • HTML
  • CSS
  • JavaScript

• Mozilla Developer Network > Web technology for developers
• Web Developer Guide
• HTML
• CSS
• JavaScript
  • JavaScript Guide
  • JavaScript Reference

• Gymnasium  – from Aquent ^New
• Codecademy
• CodeSchool
• Learn to Code HTML & CSS
• Pluralsight
• Udemy

Web Application Builders / Viewers

• Web AppBuilder for ArcGIS (Developer Edition)
• ArcGIS  > Create apps
• Flex Viewer  [Deprecated]
• Silverlight Viewer [Deprecated]

Web AppBuilder for ArcGIS

• Web AppBuilder for ArcGIS (Developer Edition)
• Esri Training >Get Started with Web AppBuilder for ArcGIS
• Esri Training >Creating Web Applications Using Templates and Web AppBuilder for ArcGIS
• GitHub >Web AppBuilder widget library from US EPA
• GeoNet >Web AppBuilder Developer Edition – Customization Resource List
• GeoNet >Tips and Observations for getting Web AppBuilder - Developer Edition Installed
• GeoNet >Tips for using the custom LocalLayer widget with WAB-Dev edition
• GeoNet >Tips (LocalLayer widgets) for more customization and Updating (may help with others too)
• ArcGIS Blog >Clarifying 3 questions about Web AppBuilder for ArcGIS

Version Contro

• GitHub
• Apache Subversion

Websites

• GIS Stack Exchange - Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals.
• stackOverflow – a question and answer site for professional and enthusiast programmers.
• HTML5 Rocks – a resource for open web HTML5 developers, HTML5 Rocks on GitHub

Widgets, dijits and code

• Table of Contents (TOC)/Legend Widget for JavaScript API
• Esri JavaScript map center, zoom level and extent

[RebeccaStrauch__GISP]

Another nice collection of resources Rudy!

[ChrisSergent]

Nice quick reference for resources.

[PaulTrevillion]

Thanks Rudy!

Paul Trevillion | Instructor, CTT+

Esri | 75 Broad Street, 4th Fl | New York, NY 10004 | USA

T 212-349-3700 ext. 5983 | ptrevillion@esri.com<mailto:ptrevillion@esri.com> | esri.com<http://www.esri.com/>

Esri Certified

ArcGIS Desktop Associate

Esri Certified

Enterprise Administration Associate

Esri Certified

Web Application Developer Associate

[XanderBakker]

Great resource! could be updated wit the DevSummit presentations of 2015:

Recent Proceedings , filter on JavaScript

... and the videos of the DevSummit:

2015 Esri Developer Summit Tech Sessions | Esri Video

2015 Esri Developer Summit User Presentations | Esri Video

... or filter by javascript:

http://video.esri.com/search/javascript

[RudyProsser]

Xander,

Thanks for the links. I'll add them in. Do you have any other resources to suggest?

Rudy

[XanderBakker]

Hi Rudy Prosser ,

I'm not a JavaScript developer, but I saw the DevSummit 2014 links and thought that it might be good to include the 2015 links.

So I do not have many additional suggestions. However, since we are on GeoNet, it might be good to highlight the space: ArcGIS API for JavaScript and while we're at it, there is a very active place Web AppBuilder Custom Widgets and ArcGIS REST API can be interesting too.

Maybe Rebecca Strauch and Robert Scheitlin, GISP might have some useful suggestions, since they do develop in JavaScript.

Kind regards, Xander

[RebeccaStrauch__GISP]

Robert and many others can develop circles around me (I'm a pretty good programming hack though), but I'll keep an eye out for anything I might see at the UC, etc.  But this is a great resource already.  The only thing is if want to add a link to my blogs....they seem to be useful (for WAB dev stuff) but they are pretty unpolished, and since for example, the install tips are what worked for me, and not how the help explains it (i.e., maybe in conflict with help), it may not fit into this more official doc.  Your call Rudy.

I do link to this page in my resource list btw since it is a helpful resource for all WAB stuff too.

[RudyProsser]

Xander

Thanks for the suggestions. I added them to a new topic "GeoNet Places."

Keep those cards and letters coming,

Rudy

[ChrisSergent]

I'm going to the UC too. I wonder how many other Devs here will. There will be a DevMeetup and  Lightning talks there. Wouldn't mind seeing people from here in person.

[RudyProsser]

Rebecca,

Send me the links that you'd like to see added to this list or a separate Web AppBuilder resource list. I don't have much on it.

Rudy

[RebeccaStrauch__GISP]

Rudy,

The most referenced/popular is Web AppBuilder Developer Edition – Customization Resource List

The first, and the one that has helped quite a few users get WAB setup with AGOL web ID, etc.

  Tips and Observations for getting Web AppBuilder - Developer Edition Installed

I have two others that were in between, mainly for getting the LocalLayer (i.e. services from user's ArcGIS Server) setup

Tips for using the custom LocalLayer widget with WAB-Dev edition

And for helping to upgrade with the custom widgets....but this one is probably a bit out of date right now

Tips (LocalLayer widgets) for more customization and Updating (may help with others too)

The resource list has a link to all the rest and it the most valuable, and I try to keep it up to date.  There are many resources and people contributing (which I list as many as I can) that may be of interest to your JS list, but it's up to you whether you want to repeat, or just link to what I have.  Regardless, I'll be maintaining mine too, since I need it too.  thanks for your list(s)....very handy.

[RebeccaStrauch__GISP]

Rudy, I think that would be an appropriate place to add at least the resource list link I mentioned.