Categories
Current Events Tampa Bay Uncategorized

What’s happening in the Tampa Bay tech scene (week of Monday, March 13, 2017)

Here’s what’s happening in Tampa Bay and surrounding areas for developers, technologists, and tech entrepreneurs this week.

Monday, March 13

Tuesday, March 14

This Tuesday, the Tampa Bay Alexa & Lex Developers Meetup holds its inaugural gathering at CoWork Tampa, where the topic will be Build Your First Alexa Skill.

An Alexa Skill is a voice interaction capability for Amazon’s Alexa voice service, which runs on various Amazon devices including the Echo, Echo Dot, Tap, Fire TV, and Fire Tablet, as well as some non-Amazon devices such as the Triby Bluetooth speaker. They’re similar to voice commands to the computer on Star Trek: there are Alexa Skills to tell you what the local weather is, play music, set an alarm or timer, answer health questions with the help of WebMD, plan vacations with the assistance of Kayak, order pizza, check stock prices or your bank balance, and more.

In this first meetup, they’ll do a step-by-step walkthrough that will show you how to create a simple Alexa skill. While knowing how to code will be helpful, coding skills aren’t absolutely necessary. Bring a laptop, and make sure you have an AWS account and an account for the Amazon developer portal. An Alexa device isn’t required — you can test Alexa skills via the developer portal, and there’s an iOS/Mac OS app that lets you use Alexa without an Alexa device.

The Tampa Bay Alexa & Lex Developers Meetup will take place at CoWork Tampa (3104 North Armenia Ave, Suite 2, Tampa) at 6:30 p.m.. Pizza and drinks will be provided.

Ybor Tech’s OpenHack is your monthly opportunity to get together with local techies at New World Brewery and socialize over craft beer (you buy) and pizza (they provide) at Ybor City’s most laid-back bar!

OpenHack Ybor takes place at New World Brewery (1313 8th Avenue, Ybor City, Tampa) at 6:30 p.m.. Pizza will be provided, drinks and other food are available.

Also happening on Tuesday:

Wednesday, March 15

Thursday, March 16

Lean Beer is the evening version of Lean Coffee, where people gather to discuss Lean and Agile practices over their adult beverage of choice. Participants propose discussion topics, discussions are timeboxed agile-style, and the conversation and company are always informative and lively.

Lean Beer for All Things Agile will take place at The Station Grill (1001 W Cass St, Tampa) at 6:00 p.m..

Also happening on Thursday:

Friday, March 17

Saturday, March 18

Want a Tampa Bay area tech event announced?

If you’ve got tech event in or near the Tampa Bay area that you’d like to see announced here, drop me a line at joey@globalnerdy.com and let me know the details!

Categories
Current Events Tampa Bay Uncategorized

Try out GM’s in-car infotainment API at the “Makers Hustle Harder” hackathon in Tampa this week!

General Motors is hosting “Makers Hustle Harder” hackathon events in just three cities in the U.S., Tampa is one of them, and it’s happening this week! This is Tampa Bay developers’ chance to try out GM’s NGI (Next Generation Infotainment) API, which lets you build infotainment applications for the touchscreen interfaces on GM vehicles, with access to real-time data from over 350 data sources.

Makers Hustle Harder is an all-week event that starts with a kickoff meeting on Monday, February 27 at 6:00 p.m. at Tampa Hackerspace. That’s when teams (2 to 4 developers per team) will be finalized and participants will get an introduction to the hackathon, as well as NGI.

From Tuesday, February 28th through Friday, March 3rd, teams will work remotely on the their projects. Participants will be able to get live support from the GM teams from 6:00 p.m. through 9:00 p.m. on those days.

The final day of the hackathon will be an in-person event at Tampa Hackerspace on Saturday, March 4th from 9:00 a.m. through 6:00 p.m., with people putting the finishing touches on their projects and making final pitches at 4:00 p.m..

The grand prize will be a trip to GM headquarters in Detroit for all the members of the winning team. There will also be prizes for runners-up.

GM’s NGI SDK in action. Click the photo to read TechCrunch’s story on it.

Apps written using the NGI SDK are written on Node.js using HTML5, CSS, and JavaScript, and run on 8-inch (diagonal) touchscreen in GM vehicles. GM’s native APIs give developers access to all sorts of car info, including:

  • Instrument panel measurements, such as trip odometer, orientation, and vehicle speed
  • GPS and navigation data
  • Audio playback and streaming
  • Status information, such as presence of passengers or if the windows are open or closed
  • Vehicle features, such as radio or backup camera
  • Performance and maintenance data, such as oil life and tire pressure
  • Warning indicators, such as a burnt-out lightbulb or low washer fluid
  • Internet data via OnStar’s 4G LTE

The NGI SDK also has a system that simulates real vehicle data so that you can test your apps on your development machine.

GM’s Director of Application Ecosystem and Development Ed Wrenbeck says that the NGI SDK makes it possible for developers to create apps ready for testing in as little time as a week. He also says that the API opens up a world of possibilities: “If you were somebody like a map provider, for example, you could actually read the suspension data coming off the vehicle and use it to determine where potholes were at in the street, for example. Just one example of some of the unusual ways that you can use data that GM provides uniquely, that other OEMs just don’t provide via their infotainment systems.”

Heavy Metal Racing, an NGI-based racing videogame that uses the Corvette’s steering wheel as a controller.

Here’s a video showing highlights from an earlier NGI hackathon:

How to participate

  1. Make sure you register for the hackathon at the official registration page.
  2. It would also help with planning if you RSVP at the Meetup.com pages for Monday’s kickoff meeting and Saturday’s full-day event.
  3. Get GM’s NGI SDK and documentation from their developer site.
  4. Assemble a team beforehand or find a team that needs developers at Monday’s kickoff. Each team must have at least one representative present at the kickoff.
Categories
Current Events Tampa Bay Uncategorized

The Tampa Bay tech scene, February 7 – 17, 2017

Figures in map show incoming LinkedIn members per 10,000 LinkedIn users. For example, for every 10,000 LinkedIn members in the Tampa Bay area, 48.7 have moved in since December.
Click the map to see the source article.

According to LinkedIn’s February 2017 workforce report, the Tampa Bay area is one of the top 10 U.S. cities that recently gained the most workers. That’s one of the reasons why there’s a lot happening in the local tech scene, and here’s what’s happening over the next couple of weeks…

St. Pete .NET’s Using Docker for development and production (Tuesday, February 7)

Using Docker for development and production: “We are going to explore how we can leverage Docker for use while we develop our applications as well as once we are ready to deploy. We will discuss creating a container that will allow us to work on our .NET Core application in a way that incorporates live rebuilds, debugging, and continuous testing.”

Tampa Bay Android Developer Group’s monthly meetup (Tuesday, February 7)

 The Tampa Bay Android Developers Group holds its monthly “30-minute talks, roundtable and socializing” meetup at The Iron Yard on the first Tuesday of the month, which is this Tuesday.

MADTampa’s Windows Developer Day get-together (Wednesday, February 8)

 The Mobile App Development Tampa group — MADTampa for short — is hosting an event where you can watch Microsoft’s big Windows Developer Day livestream at the Tampa Microsoft office. Join the Fustino Brothers and watch the livestream to see:

  • What’s new with Windows developer tooling: UWP tooling, BASH, Developer mode, and more
  • Learn about the latest XAML advancements, and how UWP helps you build Windows apps that are more personal and productive
  • Hear the developer story behind the recent announcements of Cortana skills and the new Windows mixed reality headsets
  • We’ll also close out the event with a live Q&A panel, where anyone can ask their questions
  • RSVP for this event at EventBrite
  • 12:00 p.m. – 3:30 p.m. @ Microsoft Tampa (5426 Bay Center Dr. in Tampa, Suite 700)

Suncoast Developers Guild’s Open Code (Wednesday, February 8)

 Every Wednesday, the Suncoast Developers Guild holds an Open Code night in The Iron Yard. It’s a great opportunity to work on your projects and meet other local developers in a fantastic space (The Iron Yard is in a lovely old factory building).

Tampa Bay UX’s How to be a badass designer in 2017 (Thursday, February 9)

 The Tampa Bay UX Meetup this Thursday will feature Krissy Scoufis talking about how to be a badass designer in 2017. She’ll talk about hot UX topics including:

Tampa Bay Cocoaheads’ talk on making Swift and Objective-C work together and book giveaway (Thursday, February 9)

 Another Tampa Bay Meetup that covers iOS development — Chris Woodard’s Tampa Bay Cocoaheads — is holding its first meetup of the year on Thursday. The topic of the evening will be making Swift and Objective-C work together, based on his experiences migrating a large codebase.

This meetup will feature a giveaway: autographed copies of Swift Programming: The Big Nerd Ranch Guide and iOS Development: The Big Nerd Ranch Guide.

Demo Day at The Iron Yard (Friday, February 10)

 The Iron Yard is a coding school, and on Friday, its 6th cohort will present their capstone Ruby on Rails, JavaScript, and .NET projects. These projects are the culmination of their 12 weeks of intensive training. They’ll present them to an audience of local tech companies, engineers, and supporters of the tech community, after which they’ll be happy to personally demonstrate their projects to you. There’ll be drinks and appetizers, too!

Tampa Bay Startup Week 2017 (week of Monday, February 13 through Friday, February 17)

It’s that time of the year again: Tampa Bay Startup Week! It’s a week-long series of events for local entrepreneurs, techies, and interested parties to get together, learn, chat, conspire, and break bread and clink glasses. Visit their site and see (and sign up for) events that you might be interested in!

Ybor Tech’s February OpenHack (Tuesday, February 14)

 One of my favorite local events is Ybor Tech’s OpenHack, which is simply an excuse for local developers, techies, entrepreneurs, and other similar people to get together at New World Brewery in Ybor City to enjoy pizza, beer (or cider), and each other’s company.

Categories
Current Events Florida Tampa Bay

Scenes from Saturday’s Tampa Xamarin Dev Days event

early-crowd

A good number of people arrived early to get Xamarin set up on their laptops.
Photo by Joey deVilla.

The Tampa edition of Xamarin Dev Days — a worldwide series of meetups where developers can learn about the Xamarin cross-platform development environment — took place this Saturday, and it was a successful gathering with about 70 developers in attendance.

Xamarin Dev Days are all-day events that introduce developers to Xamarin, with presentations in the morning, and hands-on workshops in the afternoon. They’re facilitated by experienced Xamarin users and evangelists, and since Microsoft acquired Xamarin, Mircosoft evangelists and MVPs have been running these events.

This was the agenda:

 Time  What’s happening
9:00 a.m. – 9:30 a.m. Registration and breakfast, which SMARTRAC and SMART COSMOS (the company and platform I represent) provided!
9:30 a.m. – 10:10 a.m. Intro to Xamarin presentation (here are the slides, in PDF format)
10:20 a.m. – 11:00 a.m. Cross-platform Xamarin with Xamarin.Forms presentation (here are the slides, in PDF format)
11:10 a.m. – 11:50 a.m. Cloud Xamarin with Azure presentation (here are the slides, in PDF format)
12:00 p.m. – 1:00 p.m. Lunch
1:00 p.m. – 4:00 p.m. Hands-on lab

early-crowd-2

Another photo of the early arrivals.
Photo by Joey deVilla.

Getting people to spend their entire Saturday in a boardroom or lecture hall isn’t an easy task even when it’s cold and miserable outside. It’s even trickier in Tampa in November, when the temperatures are spring-like and there isn’t a cloud in the sky:

img_3965-1

The view from the drive leading to Tampa’s Microsoft office, taken on the morning of Tampa’s Xamarin Dev Days.
Photo by Joey deVilla.

img_3966-1

The view from the parking lot in from of Microsoft’s Tampa office, taken on the morning of Xamarin Dev Days.
Photo by Joey deVilla.

The very least a Saturday event can do — especially in a sub-tropical paradise like Tampa Bay — is feed its attendees. Michael Stark, one of the Dev Days facilitators and organizer of the Tampa Bay Xamarin User Group, reached out to me and asked if SMARTRAC (the company for whom I work as Technology Evangelist and whose SMART COSMOS platform I promote) could sponsor breakfast. We were more than happy to do so, and thus nearly 70 developers did not go hungry that morning:

bagel-breakfast

The breakfast bounty provided by SMARTRAC.
Photo by Michael Stark. Click the photo to see the source.

Joe Healy, Microsoft Premier Developer Consultant and Developer Evangelist for the area, asked me if I could play a couple of accordion numbers to kick off the event, and I was more than happy to do so.

joey-devilla-xamarin-tampa-accordion-1

joey-devilla-xamarin-tampa-accordion-2

Here’s Joe giving a shout-out to SMARTRAC / SMART COSMOS for providing breakfast, which was followed by my quick explanation of what SMARTRAC and SMART COSMOS are:

joe-healy-smartcosmos-slide

Here’s a close-up of that “Good news, everyone!” slide:

good-news-everyone

With the preliminaries out of the way, we spent the rest of the day getting down to the business of learning about Xamarin, which runs on both Windows and Mac OS, and can be used to develop front ends for Android, iOS, Mac OS, Windows, and Azure:

daniel-jerome-photo-1

Photo by Daniel Jerome. Click the photo to see the source.

For those of us on the Mac, we worked on the current stable edition of Xamarin Studio, the Mac OS-based Xamarin development environment, pictured below:

xamarin-studio-for-mac

It’ll eventually be rebranded as Visual Studio for Mac, the preview version of which is shown below:

visual-studio-for-mac

If you’re on Windows, you’ll be using Xamarin’s features from within Visual Studio.

The event went quite nicely, with many local developers not just learning more about Xamarin, mobile, and cloud development, but also about their peers. Over breakfast, lunch, and breaks, I got a chance to talk to a lot of people about all sorts of topics, including:

  • Business and industrial applications of RFID technology. As a result of the couple of minutes I got at the start of the day as a sponsor’s representative, a couple of people approached me to talk about RFID tags and inlays and how they could be used in their businesses.
  • The current situation in India, a couple of weeks after their radical demonetization, where two of the most-used currency notes, the 500- and 1000-Rupee bills, were taken out of circulation. To get an idea of what this is like, imagine the $10 and $20 bills in the U.S. suddenly being declared invalid.
  • How Microsoft seems different now: bash on Ubuntu on Windows, development software for the Mac (Visual Studio Code and Visual Studio for Mac) and even Linux (Visual Studio Code), interesting new hardware such as Surface Studio and Surface Dial — it’s not the same company as it was five years ago, and that’s a good thing.
  • Developer opportunities in the Tampa Bay area. This always comes up at these gatherings.

While the event ended at 4 that afternoon, the gathering didn’t — a number of us regrouped at the Brick House for more conversation, accompanied by beer, food, and Jägermeister reps handing out free samples and taking promotional photos, which is why the last photo in this article has their branding:

jagermeister

My thanks to Joe Healy, Michael Stark, Jim Blizzard, Bill Reiss, and Brian Kassay for putting on a great event!

Categories
Current Events Tampa Bay Uncategorized

Xamarin Dev Days in Tampa Bay happens tomorrow – Saturday, November 19th!

xamarin

Xamarin, the development tool that lets you use C# to write code for Android, iOS, Mac OS, Windows, and the cloud, is hosting a number of Xamarin Dev Days events all over the world, and the Tampa Bay event takes place tomorrow, Saturday November 19th at 9:00 a.m..

The Tampa Bay event is hosted by the Tampa Bay Mobile App Developers meetup at the Tampa Microsoft office in the Westshore area. Xamarin Dev Days events are hands-on sessions, with the mornings dedicated to learning about Xamarin and the afternoon set for diving into coding.

Are you in the Tampa Bay area and want to join in? Register at the Tampa Bay Xamarin Dev Days site!

Agenda

Here’s what will take place, and when:

 Time  What’s happening
9:00 a.m. – 9:30 a.m. Registration and breakfast, which SMARTRAC and SMART COSMOS (the company and platform I represent) are providing!
9:30 a.m. – 10:10 a.m. “Intro to Xamarin” presentation
10:20 a.m. – 11:00 a.m. “Cross-platform Xamarin” presentation
11:10 a.m. – 11:50 a.m. “Cloud Xamarin” presentation
12:00 p.m. – 1:00 p.m. Lunch (they’ll provide it; it will most likely be pizza)
1:00 p.m. – 4:00 p.m. Hands-on lab

Your hosts will be:

What you should bring

mac-and-windows-laptops

You’ll need a computer running either Mac OS or Windows on which to do Xamarin development. You should set up Xamarin prior to showing up, because setup takes time and bandwidth, which will likely be in short supply at the event. Follow these steps:

Breakfast is on SMART COSMOS!

smart-cosmos-horizontal

If you’re going to show up to spent 8 hours of your Saturday in an office — especially in the Tampa Bay Area, where November means sunny skies and 80°F/27°C temperatures — the least we can do is feed you. SMART COSMOS will help by providing breakfast!

SMART COSMOS is the IoT platform made by SMARTRAC, the company where I hold the title of developer evangelist. It orchestrates data for the internet of things, and combined with SMARTRAC’s RFID technology, it’s being used to help clothing manufacturers and retailers manage their wares, improve the way healthcare providers track patients from the moment they check into the hospital to well after they check out, and on mechanical devices to ensure that the right parts are plugged into the right places.

New to C#, or has it been a while? Download this free book.

c-sharp-programming-yellow-book

If you’re new to the C# programming language (I’ve quipped that it’s “like Java, but good”) or if it’s been a while (as is the case for me), I recommend getting your paws on Rob Miles’ C# Programming Yellow Book, a free ebook that he’s been publishing and updating for years. It’s based on the first year programming course at the University of Hull, and it’s been the free ebook I’ve been sending C# students to for years.

Categories
Current Events Florida Tampa Bay

A walk through my “Just enough React to get you into trouble” presentation at Tampa Code Camp 2016

just enough react title slide

I had the opening presentation in the “Miscellaneous and Open Source” track of Tampa Code Camp 2016, which took place on July 16th. My presentation was titled Just enough React to get you into trouble, and was designed to be an introduction to building user interfaces using React.

In 50 minutes, I introduced React to the audience mostly by live-coding a simple React application in a JSFiddle playground. For those of you who missed it (or saw it and wanted to review it), this article walks you through my presentation. Enjoy!

Playing around with React in a JSFiddle playground

I spent most of my presentation live-coding some a simple React application in JSFiddle, a “playground” that lets you quickly try out web development ideas in your browser and save them for later use. A saved “playground” is called a fiddle, and you can fork other people’s public fiddles for your own experimentation.

JSFiddle has four key areas — HTML, CSS, JavaScript, and output, as shown below:

jsfiddle diagram

Click the screenshot to see it at full size.

JSFiddle lets you enter the HTML, CSS, and JavaScript into the corresponding areas and then see the result in the output area by clicking on the Run button located near the upper left-hand corner of the page. It even lets you import a number of JavaScript and CSS libraries.

In this exercise, we’ll work using a base fiddle that imports the libraries necessary for a React application, and we’ll do all of our coding in the JavaScript area.

Let’s start with a simple React fiddle

Let’s start by navigating to the fiddle that I set up as the starting point for the presentation. I forked it from the React base fiddle, and if you set up your own JSFiddle account, you should fork it for yourself.

The fiddle features one of the simplest React applications that you can write: “Hello, world” for React. Here’s the JavaScript:

class Hello extends React.Component {

  render() {
    return <h1>Hello, world!</h1>
  }

}


ReactDOM.render(
  <Hello />,
  document.getElementById('app')
)

And here’s a screenshot showing the output:

hello world

Let’s take a closer look at what’s going on in the JavaScript code…

1. First, we create a React component named Hello.

React is all about creating user interfaces by assembling modular, composable components. For this first example, we want to create a component named Hello, which is made up of a single <h1> heading. We do this by creating a class named Hello, which subclasses React’s React.Component class:

class Hello extends React.Component {

  render() {
    return <h1>Hello, world!</h1>
  }

}

Our Hello class has a single method, render. React component classes can implement many methods, but must implement a method called render, which returns a value that shows how the component should be drawn onscreen. The value returned by render depends on the kind of React app we’re working on:

  • In a web application, the render method returns a single HTML element. This single HTML element is allowed to contain other HTML elements.
  • In a native mobile application, the render method returns a single view. This single view is represented in a dialect of XML whose elements represent native mobile UI elements. This view is allowed to contain other views.

(For now, we’ll stick to React web applications. I’ll look at React native applications in a later article.)

Here’s the value returned by the render method:

<h1>Hello, world!</h1>

You’ve probably noticed that it’s not in quotes as you might have expected. That’s because render‘s return value isn’t a string that contains HTML.

Instead, its return value is JSX, a dialect of XML whose name is short for “JavaScript XML”. It looks like HTML, and it’s meant to — it’s a shorthand for the value that the render method actually returns, which is a React element — a JavaScript object. This fiddle — and many React applications — includes a extension that preprocesses JSX into JavaScript that generates a React element.

Here’s what render really returns, once the JSX has been processed into JavaScript:

React.createElement("h1", null, "Hello, world!")

In fact, you can have render directly return a React element. Try changing the render method so that it looks like this, then click the Run button to run the app:

render() {
  return React.createElement("h1", null, "Hello, world -- the hard way!")
}

The output should look like this:

hello world the hard way

Click the screenshot to see it at full size.

Generally, React developers prefer to work with JSX. It’s preprocessed, so using it doesn’t affect your application’s efficiency, and it’s much easier to read, especially as you work on more complex React projects.

2. Then we render the Hello component onto the page.

Here’s the line that renders the Hello component onto the page:

ReactDOM.render(
  <Hello />,
  document.getElementById('app')
)

The ReactDOM.render method takes two arguments:

  1. A React element to render. In this case, the react element is the output of Hello‘s render method, which we request by using the JSX tag <Hello />.
  2. The DOM node where the React element will be rendered. In this case, we specify that it should be rendered in the node whose id is app. If you look in the HTML area of the fiddle, you’ll see it at the very end:
<div id="app">
    <!-- 
    This element's contents will be filled by our React code's output.
    -->
</div>

This is one of the two things you should take away from this tutorial: At its core, building user interfaces in React is about defining components and then rendering them onto the screen. Everything else builds on this basic principle.

Let’s continue. If you changed the render method in Hello to use JavaScript instead of JSX, change it back. The code in the JavaScript area of the page should look like this:

class Hello extends React.Component {

  render() {
    return <h1>Hello, world!</h1>
  }

}


ReactDOM.render(
  <Hello />,
  document.getElementById('app')
)

Pass information to a component with a prop

Suppose we want our application to be a little more flexible in who it says “Hello” to. Let’s change the component so that it can be passed a name parameter, and then says “Hello,” followed by that name.

Update the code in the JavaScript area so that it looks like this:

class Hello extends React.Component {

  render() {
    const name = this.props.name
    return <h1>Hello, {name}!</h1>
  }

}


ReactDOM.render(
  <Hello name="Kate" />,
  document.getElementById('app')
)

Let’s first look at the ReactDOM.render line. Note that we’ve added an attribute to the Hello element:

<Hello name="Kate" />

The use of XML attributes in React elements allows us to pass values to the corresponding components. In the Hello element, we’re using an attribute called name to pass the string “Kate” to our Hello component.

Within the Hello component’s render method, we access that value by using the component’s props (short for properties) object and assign its value to a variable…

const name = this.props.name

…and then we use that variable within the JSX returned by the render method. Note that the variable is delimited by { }:

return <h1>Hello, {name}!</h1>

When you click on the Run button in JSFiddle, here’s what you should see:

hello kate 1

Click the screenshot to see it at full size.

For components, props are read-only — they can take in props and use their values, but they can’t change them. They’re meant to be used to set up components.

Using multiple props and rendering more stuff

Let’s change our app so that it says “Hello, Kate!” followed by a greeting:

class Hello extends React.Component {

  render() {
    const name = this.props.name
    const greeting = this.props.greeting
    return <h1>Hello, {name}!</h1>
           <p>{greeting}, {name}.</p>
  }

}


ReactDOM.render(
  <Hello name="Kate" greeting="Welcome to Tampa Code Camp" />,
  document.getElementById('app')
)

If you click the Run button right now, the output area will contain…nothing:

hello kate 1

Click the screenshot to see it at full size.

In many cases, when the output area is blank when you don’t expect it to be, it means that there’s an error in your code. In this case, it’s the fact that the render method is supposed to return only one HTML element, but our returns two:

<h1>Hello, {name}!</h1>
<p>{greeting}, {name}.</p>

While render is supposed to return a single HTML element, that single element is allowed to contain other elements. The fix is to take our two elements and enclose them in a <div> like so:

<div>
  <h1>Hello, {name}!</h1>
  <p>{greeting}, {name}.</p>
</div>

Here’s what your code should look like now…

class Hello extends React.Component {

  render() {
    const name = this.props.name
    const greeting = this.props.greeting
    return (<div>
      <h1>Hello, {name}!</h1>
      <p>{greeting}, {name}.</p>
    </div>)
  }

}


ReactDOM.render(
  <Hello name="Kate" greeting="Welcome to Tampa Code Camp" />,
  document.getElementById('app')
)

…and here’s what things should look like when you hit the Run button:

hello kate 2

Click the screenshot to see it at full size.

Introducing default props

In addition to passing values to React components using props, we can also create default values through the use of default props. Change the code in the JavaScript area of the fiddle so that it looks like this:

class Hello extends React.Component {
  
  render() {
    const name = this.props.name
    const greeting = this.props.greeting
    return (<div>
      <h1>Hello, {name}!</h1>
      <p>{greeting}, {name}.</p>
    </div>)
  }

}

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please press the button"
}


ReactDOM.render(
  <Hello />,
  document.getElementById('app')
)

Note that the <Hello> tag in the ReactDOM.render call doesn’t contain any attributes. This means that we’re not passing any props to it, which in turn means that our Hello component will use the default props defined in this line of code:

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please press the button"
}

If you run the application, you’ll see that the Hello component uses the default props, addressing the user as “stranger” and using the greeting “Please press the button”:

hello stranger

Click the screenshot to see it at full size.

However, if we change the <Hello> tag in the ReactDOM.render call so that it has name and greeting attributes, as shown in the code below…

class Hello extends React.Component {
  
  render() {
    const name = this.props.name
    const greeting = this.props.greeting
    return (<div>
      <h1>Hello, {name}!</h1>
      <p>{greeting}, {name}.</p>
    </div>)
  }

}

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please tell me your name"
}


ReactDOM.render(
  <Hello name="Kate" greeting="Welcome to Tampa Code Camp" />,
  document.getElementById('app')
)

…when you run the application, the Hello component uses the given props, addressing the user as “Kate” and using the greeting “Welcome to Tampa Code Camp”:

hello kate 3-2

Click the screenshot to see it at full size.

Adding state and interactivity

As I mentioned earlier, as far as components are concerned, props are read-only. They can only be set by attributes in the tags that invoke them and in the statement that sets their default values. With only read-only data like props, components themselves would also be read-only. What we need is data that components can change in response to user input or events, and that’s what state is for.

State is represented by the state object, which every React component has. Like the props object, it’s a “dictionary” that components can use to store values. However, there are two key differences between state and props:

  1. Unlike with the props object, the state object is read-write. Components can change the values within the state object by using the setState method.
  2. Any change to a component’s state object causes its render method to be called.

That second difference is key; in fact, it’s why the library is called “React”. The name is a nod to reactive programming, which is often defined as being “oriented around data flows and the propagation of change” (in fact, Wikipedia uses his definition). A greatly simplified way to describe it as “programming code that responds to changes in data”.

And now, here’s the second of the two things you should take away from this tutorial: Making changes to React components is all about changing their state. Or, if you’re into snappy rhyming mantras or hip-hop, remember it this way: Change the state to make it update.

Modify the code in the JavaScript area so that it looks like this. Don’t worry about any of the unfamiliar stuff; I’ll walk you through it in a moment:

class Hello extends React.Component {

  constructor(props) {
    super(props)
    this.onSubmit = this.onSubmit.bind(this)
    this.state = {
      name: this.props.name,
      greeting: this.props.greeting
    }
  }
  
  render() {
    const name = this.state.name
    const greeting = this.state.greeting
    return (<div>
      <h1>Hello, {name}!</h1>
      <p>{greeting}, {name}.</p>
      
      <form onSubmit={this.onSubmit}>
        <button>Update!</button>
      </form>
    </div>)
  }
  
  onSubmit(event) {
    event.preventDefault()
    this.setState({
      name: "button-presser",
      greeting: "Thanks for pressing the button"
    })
  }

}

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please press the button"
}


ReactDOM.render(
  <Hello />,
  document.getElementById('app')
)

When you press the Run button, you should be greeted with “Hello, stranger!”, an invitation to press a button, and a button, as shown below…

hello stranger 2

Click the screenshot to see it at full size.

…and when you press that button, the name you’re referred to and the message below it change:

hello stranger 3

Click the screenshot to see it at full size.

Let’s take a closer look at the code. We’ll start with the render method, which is often a good place to start analyzing React components:

render() {
  const name = this.state.name
  const greeting = this.state.greeting
  return (<div>
    <h1>Hello, {name}!</h1>
    <p>{greeting}, {name}.</p>
      
    <form onSubmit={this.onSubmit}>
      <button>Update!</button>
    </form>
  </div>)
}

The main difference between this render method and the previous one is the addition of this form code:

<form onSubmit={this.onSubmit}>
  <button>Update!</button>
</form>

The onSubmit attribute of the <form> tag is set to {this.onSubmit}, which means that when the form is submitted — which in turn that means that the user has clicked the button — the class’ onSubmit method is called. Let’s look at onSubmit now:

onSubmit(event) {
  event.preventDefault()
  this.setState({
    name: "button-presser",
    greeting: "Thanks for pressing the button"
  })
}

Two things are happening in this method:

  1. First, the event.preventDefault method is called. This stops the page from reloading, which is the default behavior when a form is submitted (it also explains the name of the method).
  2. Then, the setState method is called, which changes the properties of the state object so that:
    • name‘s value is changed to “button-presser”, and
    • greeting‘s value is changed to “Thanks for pressing the button”.

And since we’ve changed state, the render method gets called, which in turn causes it to display the new state values.

Finally, let’s take a look at the constructor:

constructor(props) {
  super(props)
  this.onSubmit = this.onSubmit.bind(this)
  this.state = {
    name: this.props.name,
    greeting: this.props.greeting
  }
}

Here’s what’s happening in this method:

  1. The props argument that constructor takes contains the properties that were passed to Hello via the <Hello> tag’s attributes. As with constructors in many other programming languages, we pass this argument to the component’s superclass with super(props).
  2. The onSubmit attribute of our form specifies that the this.onSubmit method should be called when the form is submitted. The problem is that within the JSX, the this in this.onSubmit is undefined. We solve this problem by binding the onSubmit method to this specific instance of the Hello class, so that the this in this.onSubmit points to this instance (if you’re skeptical, comment out the line this.onSubmit = this.onSubmit.bind(this) and try running the app). You’ll need to do this sort of binding for every method that you call from JSX.
  3. And finally, we update the state object, which in turn causes the render method to get called, redrawing the component with the new values.

A little more interactivity

Let’s add a text field to our application, and change the code so that we first run, it looks like this:

interactive 1

If you leave the text field blank and click the Enter button or hit the Return key, the output area should change to display this:

interactive 2

If you type the name “Zaphod” into the text field and click the Enter button or hit the Return key, the output area should change to display this:

interactive 3

Here’s the code that does this:

class Hello extends React.Component {

  constructor(props) {
    super(props)
    this.onSubmit = this.onSubmit.bind(this)
    this.state = {
      name: this.props.name,
      greeting: this.props.greeting
    }
  }
  
  render() {
    const name = this.state.name
    const greeting = this.state.greeting
    return (<div>
      <h1>Hello, {name}!</h1>
      <p>{greeting}, {name}.</p>
      
      <form onSubmit={this.onSubmit}>
        <input ref="nameTextField" type="text" placeholder="Enter your name here." />
        <button>Enter</button>
      </form>
    </div>)
  }
  
  onSubmit(event) {
    event.preventDefault()
    const nameTextField = this.refs.nameTextField
    const newName = nameTextField.value.trim()
    nameTextField.value = ""
    
    if (newName.length > 0) {
      this.setState({
        name: newName,
        greeting: "Pleased to meet you"
      })
    }
    else {
    	this.setState({
      	name: "stranger",
        greeting: "Seriously, please enter your name"
      })
    }
  }

}

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please tell me your name"
}


ReactDOM.render(
  <Hello />,
  document.getElementById('app')
)

Let’s take a closer look at the code. We’ll start with the render method:

render() {
  const name = this.state.name
  const greeting = this.state.greeting
  return (<div>
    <h1>Hello, {name}!</h1>
    <p>{greeting}, {name}.</p>
      
    <form onSubmit={this.onSubmit}>
      <input ref="nameTextField" type="text" placeholder="Enter your name here." />
      <button>Enter</button>
    </form>
  </div>)
}

The only difference between this version of the render method and the previous one is the addition of a single line containing an <input> tag:

<input ref="nameTextField" type="text" placeholder="Enter your name here." />

It looks like a standard <input> tag, but it has a strange attribute called ref. That’s short for reference, and it a way for other code to access this tag. Think of it as being similar to HTML’s id attribute, but for React. We access refs that we define in JSX via the refs object, which is similar in structure to the props and state objects.

The onSubmit method isn’t all too different, either:

onSubmit(event) {
  event.preventDefault()
  const nameTextField = this.refs.nameTextField
  const newName = nameTextField.value.trim()
  nameTextField.value = ""
  
  if (newName.length > 0) {
    this.setState({
      name: newName,
      greeting: "Pleased to meet you"
    })
  }
  else {
    this.setState({
      name: "stranger",
      greeting: "Seriously, please enter your name"
    })
  }
}

Some notes:

  1. We’ve created a new constant, nameTextField, which holds a reference to the element whose ref is nameTextField — the text field into which the user enters his/her name.
  2. We fill another constant, newName, with the contents of nameTextField, trimmed of leading and trailing white space.
  3. We clear the text field.
  4. If the user entered something into the text field, newName‘s length will be greater than 0, and we change the state so that the newly-entered name becomes the value for the state key name and “Pleased to meet you” becomes the value for the state key greeting.
  5. If the user entered nothing into the text field (or entered nothing but white space into it), newName‘s length will be 0, and we change the state so that the value for the state key name is “stranger”, and “Seriously, please enter your name” becomes the value for the state key greeting.

Componentizing

So far, we’ve created a single component, Hello, for our application. For a simple tutorial app, this approach — sometimes called the Big Ball of Mud — is a workable one. You wouldn’t want to use it for an app of any appreciable size, as it becomes hard to code, manage, and maintain. Ideally, a React UI is supposed to be made up of small components that collectively form a larger whole.

Let’s break up our simple app into components as shown in the diagram below:

components

Note that in the diagram, the UI is broken into three components:

  1. Greeting: This displays the name and greeting.
  2. NameForm: This displays the form, which contains our text field and button.
  3. Hello: This contains both the Greeting and NameForm components.

Greeting and NameForm present UI components, and are thus called presentation components. Their job is to present user interface elements that are visible to the user.

Hello is used as a container for other components, and is hence called a container component. Its has a couple of jobs:

  • To act as a container for other components, Greeting and NameForm in this case, and
  • To contain the user interface state and logic for itself and its child components (again, Greeting and NameForm).

Let’s start by coding the Greeting component, one of the presentation components:

class Greeting extends React.Component {

  render() {
    const name = this.props.name
    const greeting = this.props.greeting
    return (<div>
      <h1>Hello, {name}!</h1>
      <p>{greeting}, {name}.</p>
    </div>)
  }

}

It’s a pretty simple component: it expects two props — name and greeting — and displays them appropriately. Nothing new here.

Note that Greeter doesn’t make use of any state; it simply accepts two props and displays them. It doesn’t do any “thinking”. You’ll see this approach in a lot of React code, where presentation components don’t have much logic them and a primarily concerned with the display and input of information.

Think of this as the mantra for presentation components:

youre not paid to think

Let’s now code the NameForm component, the other presentation component:

class NameForm extends React.Component {
  constructor() {
    super()
    this.onSubmit = this.onSubmit.bind(this)
  }

  render() {
    return (<div>
      <form onSubmit={this.onSubmit}>
        <input ref="nameTextField" type="text" placeholder="Enter your name here." />
        <button>Enter</button>
      </form>
    </div>)
  }
  
  onSubmit(event) {
    event.preventDefault()
    const nameTextField = this.refs.nameTextField
    const newName = nameTextField.value.trim()
    nameTextField.value = ""
    
    if (newName.length > 0) {
      this.props.onNewName(newName)
    }
    else {
      this.props.onNoName()
    }
  }

}

The only really different part is the if statement in the onSubmit method:

if (newName.length > 0) {
  this.props.onNewName(newName)
}
else {
  this.props.onNoName()
}

In the previous version of our onSubmit method, both branches made changes to the state object. This time it’s different:

  • If the user entered something into the text field (i.e. newName‘s length is greater than 0), it calls a method called onNewName, which is stored in the props object. It passes newName as an argument to onNewName.
  • If the user entered nothing or just white space into the text field (i.e. newName‘s length is 0), it calls a method called onNoName, which is also stored in the props object.

Note that both onNewName and onNoName are stored in NameForm‘s props. This means that NameForm has very little built-in logic for dealing with user input, but instead receives this logic from an outside source through its props. As with Greeter, NameForm doesn’t make use of state. Once again, this is an approach you’ll see in a lot of React code — presentation components doing as little “thinking” as possible.

Both Greeter and NameForm receive their props from their container component, Hello. Let’s look at its code:

class Hello extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      name: this.props.name,
      greeting: this.props.greeting
    }
    this.handleNewName = this.handleNewName.bind(this)
    this.handleNoName = this.handleNoName.bind(this)
  }
  
  render() {
    return (<div>
      <Greeting name={this.state.name} greeting={this.state.greeting} />
      <NameForm onNewName={this.handleNewName} onNoName={this.handleNoName} />
    </div>)
  }

  handleNewName(newName) {
    this.setState({
      name: newName,
      greeting: "Pleased to meet you"
    })
  }
  
  handleNoName() {
    this.setState({
      name: "stranger",
      greeting: "Seriously, please enter your name"
    })
  }

}

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please tell me your name"
}

Let’s look at its render method first:

render() {
  return (<div>
    <Greeting name={this.state.name} greeting={this.state.greeting} />
    <NameForm onNewName={this.handleNewName} onNoName={this.handleNoName} />
  </div>)
}

Note that the <div> it returns has two component tags and nothing else:

  1. Greeting: We pass the current name and greeting to it via the attributes, which it receives as props.
  2. NameForm: We pass it two methods — handleNewName and handleNoName — via attributes, which it receives as props.

Let’s take a look at handleNewName and handleNoName:

handleNewName(newName) {
  this.setState({
    name: newName,
    greeting: "Pleased to meet you"
  })
}

handleNoName() {
  this.setState({
    name: "stranger",
    greeting: "Seriously, please enter your name"
  })
}

Note that:

  1. handleNewName does just one thing: change the state so that the value for name is set to the contents of newName, and the value for greeting is set to “Please to meet you”. Changing the state of the Hello component causes its render method to be called, which in turn causes the Greeting and NameForm components to be redrawn, which causes them to call their render methods as well.
  2. handleNoName also does just one thing: change the state so that the value for name is set to “stranger”, and the value for greeting is set to “Seriously, please enter your name”. Changing the state of the Hello component causes its render method to be called, which in turn causes the Greeting and NameForm components to be redrawn, which causes them to call their render methods as well.
  3. handleNewName and handleNoName are passed as props to NameForm, which uses their logic to perform tasks based on what the user enters or doesn’t enter into NameForm‘s text field. It appears that while Hello doesn’t present any user interface of its own, it does a lot of the “thinking”.
  4. Note that Hello‘s methods, handleNewName and handleNoName, are passed to NameForm as props with the names onNewName and onNoName. This is a naming convention used in React:
    • When defining a function that will be passed to a child component, prefix the function name with handle. A name beginning with handle implies that we’re defining a response to a specific event.
    • When passing a function to a child component as a prop, prefix the prop name with on. A name beginning with on implies that we’re calling on a defined response to a specific event.

Let’s take a closer look at the constructor:

constructor(props) {
  super(props)
  this.state = {
    name: this.props.name,
    greeting: this.props.greeting
  }
  this.handleNewName = this.handleNewName.bind(this)
  this.handleNoName = this.handleNoName.bind(this)
}

The constructor sets up the app’s initial state based on the default props. It also binds the handleNewName and handleNoName methods to the current instance, so that they can be called when they’re passed as props to the NameForm component.

Speaking of default props, here’s the function that sets Hello‘s default props:

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please tell me your name"
}

That’s the complete definition for the Hello component.

We’ve just reviewed all the code in the app piece by piece. Here’s the complete code:

class Greeting extends React.Component {

  render() {
    const name = this.props.name
    const greeting = this.props.greeting
    return (<div>
      <h1>Hello, {name}!</h1>
      <p>{greeting}, {name}.</p>
    </div>)
  }

}


class NameForm extends React.Component {
  constructor() {
    super()
    this.onSubmit = this.onSubmit.bind(this)
  }

  render() {
    return (<div>
      <form onSubmit={this.onSubmit}>
        <input ref="nameTextField" type="text" placeholder="Enter your name here." />
        <button>Enter</button>
      </form>
    </div>)
  }
  
  onSubmit(event) {
    event.preventDefault()
    const nameTextField = this.refs.nameTextField
    const newName = nameTextField.value.trim()
    nameTextField.value = ""
    
    if (newName.length > 0) {
      this.props.onNewName(newName)
    }
    else {
    	this.props.onNoName()
    }
  }

}


class Hello extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
    	name: this.props.name,
      greeting: this.props.greeting
    }
    this.handleNewName = this.handleNewName.bind(this)
    this.handleNoName = this.handleNoName.bind(this)
  }
  
  render() {
    return (<div>
      <Greeting name={this.state.name} greeting={this.state.greeting} />
      <NameForm onNewName={this.handleNewName} onNoName={this.handleNoName} />
    </div>)
  }

  handleNewName(newName) {
    this.setState({
      name: newName,
      greeting: "Pleased to meet you"
    })
  }
  
  handleNoName() {
    this.setState({
      name: "stranger",
      greeting: "Seriously, please enter your name"
    })
  }

}

Hello.defaultProps = {
  name: "stranger",
  greeting: "Please tell me your name"
}


ReactDOM.render(
  <Hello />,
  document.getElementById('app')
)

Looking at the entire application, note that the Hello component, as the container component, doesn’t display any UI of its own; it simply displays its child components. However, it also contains all the “smarts”, maintaining the state of the application and passing its child presentation components any information they need:

  • Hello passes data to the Greeting component, namely the name and greeting it should use, and
  • Hello passes instructions to the NameForm component, namely what it should do if the user entered a name (handleNewName) and what it should do if the user left the name text field blank or filled with white space (handleNoName).

In the meantime, the Greeting and NameForm components present their parts of the UI and do what they’re told as specified by the props passed to them.

You’ve probably noticed that this arrangement ensures that the flow of information in this application is one-way, starting at the top and going down…

flow of information

…with the top-level reactDOM.render method calling on the Hello component to render itself, and the Hello component providing data and instructions to the Greeting and NameForm components and calling on them to render themselves. The information doesn’t flow the other way — The Greeting and NameForm components don’t send any information to the Hello component, and the Hello component doesn’t send any information to the code>reactDOM.render statement. This one-way flow of information simplifies development and is a basic principle of React.

Next steps

next steps

You’ve probably suspected that this is just the beginning. You’re right — there’s only so much you can cover in a 50-minute presentation, and React is already a large topic, and it’s continuing to grow. Here are some resources you might find handy:

  • The official React site: Sooner or later, you’ll have to go to the mothership, and that’s what this site is — the official source of the React code, and home of the official documentation.
  • The React base fiddle: If you want to play around with React code in a fiddle (an online playground), this is a good place to start.
  • build with react: This site describes itself as “a periodical of tutorials and advanced articles for the react.js library”.
  • LearnCode.academy’s React.js tutorial:  If you learn better from video tutorials, you should find this one helpful. This is the first in a series of tutorials.
  • Questions tagged “reactjs” in Stack Overflow: If you have a programming problem, chances are that many other people have (or have had) the same problem, and it may have already been solved. That’s what good ol’ Stack Overflow is for!
  • The ReactJS Tampa Bay Meetup: If you’re local to the Tampa area, there’s a React meetup that meets twice monthly! They alternate between “lecture” and “lab” formats every two weeks, the group is friendly, and you’ll learn a lot.
Categories
Florida Tampa Bay

Why you should attend Tampa Code Camp this Saturday

tampa code camp

What’s Tampa Code Camp?

tampa code camp logoTampa Code Camp is an annual community learning event for programmers in the Tampa Bay Area. This year’s edition takes place this Saturday, July 16th at the KForce offices, located just on the edge of Ybor City.

This year, Tampa Code Camp will feature 28 presentations across 4 tracks — cloud, web/mobile, .NET, and miscellaneous and open source — presented by local developers who are volunteering their time to share their knowledge. Tampa Code Camp is free to attend (but you need to register) and provides free donuts in the morning and a free lunch to attendees, thanks to the generosity of its sponsors.

Why should you attend Tampa Code Camp?

hands on laptops

Developer and author of AngularJS in Action Lukas Ruebbelke wrote in What I Wish I Could Tell My Younger Programmer Self that the three things he wishes he could tell his younger self are:

  1. Surround yourself with programmers
  2. Surround yourself with better programmers
  3. The community’s success is your success

He’s right. Learning to program is enhanced when conversing and collaborating with other programmers. It’s even better when you can find peers from whom you can learn, and who challenge to become better (Mom was right — you should choose your friends carefully). And finally, the time and effort you invest into the local developer community often pays off with interest.

For Tampa Bay developers, Tampa Code Camp is a great way to follow Lukas’ advice to his younger self. It’s a great way to meet your industry peers, and from my experience at past code camps, you’ll always find people from whom you can learn. The connections you make at code camps can greatly benefit both your personal and professional life. And finally and most importantly, events like this — events that educate, support, connect, and strengthen the developer community — help to build Tampa Bay’s tech social capital and make it a better place for developers to live and work.

What’s being presented at this year’s Tampa Code Camp?

joe darkoTampa Code Camp opens with a keynote by a person of note. Last year, it was Mayor Bob Buckhorn, who talked about the importance of helping grow Tampa’s technological sector, especially for small businesses and startups.

This year’s keynote speaker is Joe Darko (pictured on the right), Program Manager Evangelist with Microsoft. He’ll open this year’s Tampa Code Camp with a talk about community and what it means to Microsoft.

The day’s 28 technical presentations will start at 9:00 a.m. and will be arranged into four tracks:

  1. Cloud
  2. Web/mobile
  3. .NET
  4. Miscellaneous and open source

A free lunch (usually sandwiches) will be served from 11:50 a.m. to just before 1:00 p.m., and there will be an after-party sometime around 6:00 p.m. at a nearby location to be announced.

Here’s the schedule, broken down by track:

Cloud track

Web/mobile track

.NET track

Miscellaneous and open source track

Who’s behind Tampa Code Camp?

Tampa Code Camp is a volunteer, labor-of-love effort by and for the Tampa Bay developer community. It’s pulled together every year by Greg Leonardo and Kate Leonardo, with the generous help of these sponsors…

…and of course, the presenters and volunteers who help run the event.

How do I sign up to attend Tampa Code Camp?

ohyesitsfree.jpg

Go to Tampa Code Camp’s registration page to register. Please do so — it helps the organizers plan for space, food, and other amenities, and it’s the least you can do since the event is free.

I’ll see you there on Saturday!