Tools for the Modern Web Developer

Gavin Rehkemper & Josh Peterson

1

Our Frameworks Toolkit

Postman Collections

CodeSandbox

CI/CD

Postman Interceptor

Postman Collections

API REST Collection

(General Purpose)

Open Data Collection

(ArcGIS Hub)

Hosted Feature Services

(ArcGIS Enterprise)

ArcGIS Content

(in progress)

github.com/esri-es/ArcGIS-REST-API/

Our Frameworks Toolkit

  • JSAPI as modules
    • esri-loader
    • @arcgis/webpack-plugin
  • Do you need the JSAPI?
    • arcgis-rest-js
  • Other goodies
  • The docs
  • @arcgis/cli
  • feedback-js-api-next

 

DEMO

  • Codesandbox w/ esri-loader vs webpack plugin?

ArcGIS API for JavaScript as JS Modules

@arcgis/webpack-plugin

Use this when...

  • ArcGIS API > 4.7
  • You're in control of Webpack

ArcGIS API for JavaScript as JS Modules

esri-loader

However...

  • ArcGIS API 3 or 4
  • Can't configure Webpack
  • Don't want to configure Webpack

Unless you don't need the API at all...

arcgis-rest-js

CodeSandbox

A real IDE... in your browser!

It's basically VS Code.

  • Command Palette
  • Formatting & Linting
  • Shortcuts
  • Live mode and more!

Do you like create-react-app?

You're gonna love Templates.

Do you like servers?

Containers are for you.

Continuous Integration and Deployment

Actions

CI/CD

GitLab CI/CD is configured by a file called .gitlab-ci.yml placed at the repository’s root.

stages:
  - build
  - deploy
build_dev:
  stage: build
  image: jojomi/hugo:0.63.1
  script:
  - hugo version
  - env HUGO_BASEURL="https://mydevsite.com" hugo -d public_html
  artifacts:
    paths:
    - public_html
  only:
  - develop
deploy_dev:
  stage: deploy
  image: alpine:latest
  before_script:
  - apk update
  script:
  - rsync -avhz --delete public_html/ myusername@mydevsite.com:/home/my-dev-site-file-location/
  only:
  - develop

Actions

https://github.com/gavinr/sapper

CI/CD Ideas

  1. Code Linting
  2. Spell Checking
  3. Build your Website*
  4. Bump version numbers
  5. Scan your code for security issues

Resources

  • todo
  • Esri on GitHub:
    • github.com/Esri

Slides:
esriurl.com/todo

State of JS Survey - 2016

State of JS Survey - 2017

State of JS Survey - 2018

Angular CLI

Create React App

Vue CLI

(Now.sh)

Esri/react-arcgis

Esri/calcite-react

Esri/angular-cli-esri-map

Esri/ember-esri-loader

Esri/ember-arcgis-portal-services

Esri/ember-cli-amd

Esri/esri-loader

Esri/arcgis-js-cli

Esri/arcgis-rest-js

Esri/calcite-web

Tools for the Modern Web Developer (2020)

By Josh Peterson

Made with Slides.com

Tools for the Modern Web Developer (2020)

The world of web development is constantly changing, and staying abreast of the latest tools like code editors, terminals, linters, and apps is vitally important. Come hear about our favorite tools and how they can help you become a better, more efficient developer.

  • 370

More from Josh Peterson