Connect.Tech 2018 Workshop Instructions.md

Please follow the workshop instructions for only the workshop for which you are registered for Connect.Tech 2018. Please check your email to see which workshop you registered for; otherwise email us.

Next-level React, Sia Karamalegos
—————
Full set up instructions can be found here.

@prpatel is this good enough or do you want me to copy-paste them here too?

React Native Workshop ⚛️

You'll be able to write React Native code for either iOS, Android, or both. Let's make sure your machine is ready to get rolling.

It's important that you are able to run a "Hello World" app BEFORE this workshop, even if you're not familiar with the steps.

We'll go over all the tools you've installed, but for now let's get you setup. If these steps seem rudimentary, then good! That's why we want them out of the way before the course. If these tools are new to you, please spend some time familiarizing yourself as we will mention but not go into detail on their exact use.

Get your machine up and running with the basic React Native app.

• Mac Setup
• Windows Setup
• Linux Setup

Let's be ready!

Each of the directions above, ask you to generate "AwesomeProject" and run it. If you've done that you're ready for our workshop!

SPECIAL NOTE!!! If you're having trouble with React Native 0.57 and Xcode 10 you might need to the following to fix it:

cd node_modules/react-native/scripts && ./ios-install-third-party.sh && cd ../../../
cd node_modules/react-native/third-party/glog-0.3.5/ && ../../scripts/ios-configure-glog.sh && cd ../../../../

Intro to Vue.js

Taught by Adam Jahr and Alex Hernandez on behalf of VueMastery.com

---

Throughout this workshop, attendees will be completing coding challenges to learn the essential Vue syntax and build a real-world Vue.js application by following along with this document.

RxJS Workshop

Led by Jeff Barczewski

Instructions and git repo is here https://github.com/codewinds/rxjs-workshop

It is a good idea to clone the repo and do installs at home to avoid congestion at the conference.

You will need node.js 8 or 10 along with npm. (Instructions are included in the README)

After cloning the repo, cd into the rxjs-workshop and run npm i && npm run install-other

There will be some minor updates to pull as we get closer to the workshop, but having the major stuff already installed will be a huge help.

RxJS is amazing technology and I look forward to sharing it with you.

Up and Running with Angular

Led by Justin James (@digitaldrummerj)

Make sure to bring your laptops and power supply. This is a hands on workshop.

Steps

1. Visual Studio Code
2. NodeJS
3. Angular CLI
4. Create new project
5. Run new project

Visual Studio Code

Visual Studio Code is Microsoft lightweight cross platform IDE.

1. Download Visual Studio Code at https://code.visualstudio.com/

2. Once the download finishes, launch the installer except all of the defaults.

3. Here are the extensions that I have installed:

   • Angular Language Service
   • Prettier
   • Path Intellisense
   • Bracket Pair Colorizer
   • Editor Config
   • TSLint

4. To hide the mini map go into the Preferences -> Settings (File -> Preferences -> Settings on Windows) and add the following setting

   "editor.minimap.enabled": false,

5. I also like to always have word wrap turned on. You can turn this on in the same preferences file as you used for turning off the mini map above.

   "editor.wrappingIndent": "same",

6. Prettier settings that take effect when formatting the document

   "prettier.printWidth": 100,
   "prettier.singleQuote": true,
   "prettier.bracketSpacing": true,
   "prettier.trailingComma": "es5",

7. Some people also like to have VSCode auto save the file for them. Below is will save the file anytime that you switch to a different file or different program. You can also do ctrl+s at anytime to save the file as well

   "files.autoSave": "onFocusChange"

Node.js

NodeJS is used to power the Angular CLI as well as install all of our dependencies. The Angular CLI requires Node version 8.

1. Download the latest stable version (LTS) of NodeJS which as of this writing is 8.12.0

2. Run the installer and accept all defaults.

3. Verify that Node installed. Start a command prompt or terminal window and run:

   node -v

Angular CLI Install

The Angular CLI (Command Line Interface) makes it so that you do not have to worry about the Angular tooling and can focus instead on your code. You can create new projects, components, modules, services, guards, pipes and routes. As well it has commands for linting, testing and running our code.

All of the code that is generated by the Angular CLI following the Angular Style Guide.

While you do not have to use the Angular CLI, it is highly recommended, will increase your productivity, and this workshop only gives the instructions for developing with the Angular CLI.

1. Open a command prompt or terminal and run the following command

   npm install -g @angular/cli

2. Verify Angular CLI

   ng --version

Generate New Project

The project that the Angular CLI create for you follows all of the suggested standards and has webpack for bundling built-in to it.

1. Open a command prompt

2. Navigate to where you want to store your project files. I use c:\projects on Windows and ~/projects on OSx. You are free to use anywhere that you want.

   • Windows:

     cd \

   • OSx:

     cd ~/

3. Create the projects directory. If you already have a directory that you store your projects in then you can skip this step.

   mkdir projects

4. Navigate into the projects directory

   cd projects

5. Generate a project named ngws that uses scss for styling and includes a routing file by running

   ng new ngws --style scss --routing

Running Project

The Angular CLI has a built-in command for starting up a development web server for your project called ng serve which will run webpack to bundle up your code, start the development web server, rebuild on file changes (watch) and refresh connected browsers (live reload).

1. Visual Studio Code has a built-in terminal that we can use to run our commands. On Windows, this is a powershell prompt. To open the Integrated Terminal go under the View Menu and click on the Integrate Terminal or press Ctrl+`

   • You are free to use the regular command prompt outside of Visual Studio Code if you would like

2. Will be using the package.json shortcut scripts to run our commands. Personally, I like to setup my package.json scripts to run all of my commands like linting, testing, build, and running. Out of the box, the package.json scripts are setup for these. Later, we will modify them to add additional functionality for running continuous integration scripts.

   npm run start

3. If you launch your browser and navigate to http://localhost:4200, you will see the projects default page

Vue Vixens workshop (skulk)

Jen Looper, Natalia Tepluhina, and Diana Rodriguez

We will use Code Sandbox to build for the web and the NativeScript Playground for creating mobile apps (play.nativescript.org). No installations are necessary, but bring your laptop, a charger, and your mobile device (iOS or Android).

All workshop content is available at vuevixens.org.

Unlock: Accessibility and Conversational UI Workshop
Scott Davis
No Special Setup Needed

Proven patterns for building Vue apps
Chris Fritz
https://gist.github.com/chrisvfritz/51f761763b455aa3f6eb8d5408b6ab70

Modern Front-End Performance Strategies and Techniques

Attendees will need to bring a laptop with Node and Google Chrome installed. To get the most out of this workshop, some experience with HTML and JavaScript is recommended. Familiarity with React will be helpful, but is not required.

• Workshop repo: https://github.com/jlengstorf/perceived-perf

#Unlock: Accessibility and Conversational UI Workshop

Scott Davis

• You should have a text editor or IDE that allows you to create simple HTML files
• You should have a simple web server that allows you to serve up HTML files from localhost
• Ideally, you'll have headphones to help cut down on the ambient noise once the entire room starts working on Text-to-Speech labs