A lot of Software Development is about Learning

February 21, 2018    Development WebDev Presenting

A lot of Software Development is about Learning

I’m talking with a local university computer science club. I was asked to talk about Web Development, but as I was preparing that title “A lot of Software Development is about Learning” stuck out to me. With that as the over arching theme, I then delved into an overview of “Web Development Building Blocks”. I hope to get the students excited about the opportunities in web development and to get in the mindset of always learning to better themselves and their team.

Here’s a link to my PowerPoint.

There’s a lot to learn as a web developer.

A Day in the Life

from https://twitter.com/simona_cotin/status/950747684763189249

Web Development Building Blocks

The foundational pieces of the web are HTML, CSS, JavaScript and HTTP. Plugging these together like Legos, we can build complex applications.

lego blocks

HTML

  • HyperText Markup Language was created in 1989 to “to organize and pool together information”
  • The DOM (Document Object Model) has come a long ways since the early days.
  • HTML5 came in 2014 with many improvements

Layout has some new approaches that are very helpful.

CSS Grid

Flexbox

CSS

“CSS stands for Cascading Style Sheets and is a language used for describing the look and formatting of a document written in a markup language.” - https://en.wikipedia.org/wiki/Cascading_Style_Sheets

Tools:

There are many libraries to help you get going quickly

Consider Atomic Design ideas to think of CSS in components that build up and fit together to make a system. It’s easy to have a mess of CSS quickly in an application.

JavaScript

JavaScript allows interactive by allowing dynamic manipulation of the DOM. Originally it was just for the browser (created by Brendan Eich and release with Netscape Navigator 2.0 in September 1995). With NodeJs it’s being used in more places then ever (server, development tools, “native” apps).

I wrote up a history and overview of JavaScript

JQuery - It was a great tool, but I’m ready to move on (that’s my opinion). I wrote some articles and gave some talks called JavaScript mess to Cleaner Code.

You can do a lot of things with the improved DOM and JavaScript. Browsers also implement spec a lot better then they did 10+ years ago. Check out You Might Not Need JQuery.

There’s also an article about using VueJs to replace jQuery

Client and Server

A fundamental part of web development is understanding what the client and server jobs are. Some developers work the “full-stack” while others focus on the client or the server.

There are good answers to this question on StackExchange.

Client Side

This is the application (in a browser or other application) that shows the information and is interacted directly with by the user. The client side makes calls through HTTP to the Server Side to get HTML, CSS, JavaScript and JSON data.

The client side runs JavaScript (for a web app) that can manipulate the HTML sent from the server and make HTTP calls.

Server Side (Asp.Net Core, Java Spring MVC, NodeJs, PHP)

The server side are the web servers that host the files and information. There are many options in technologies to use from Microsoft’s Asp.Net Core and IIS to Java to NodeJs to PHP. One approach is to render all the HTML on the server with Razor in Asp.Net or PHP code that is sent to the browser.

API - Getting data over HTTP

Server side technology serve up data through HTTP in several ways.

NPM and Yarn (package management)

Open source and Github have made it easy to share code and tools. NPM and Yarn make it easy to pull all the pieces an app needs to function from the repositories.

Yarn happens to be newer then NPM and has some listed improvements, but both are good options.

Client Frameworks - Angular, React, VueJs, Aurelia and more

Frameworks are not all the same.

I would be amiss not to mention that I think Aurelia is a good option, even though the adoption is lower and it doesn’t have a giant company like Google or Facebook behind it.

Watch John Papa build an Angular app from scratch

JavaScript Frameworks Cartoon

Progressive Web Apps (PWA)

I’ve gathered many links and information about PWA. I’m excited about this approach and look forward to learning more about it.

Native or Web?

As always, it depends :-). However, the advancements in web technology (PWA, JavaScript speed, Browser support) seems to making this easier. I tend to think Web first, unless we’re doing advanced graphics or really need it in the store (even PWAs are going to be get included in stores in the future, at least the Windows Store).

Betting on the web was a good article (among many) on choosing the web and the excitement around it.

Build an app with Web technologies with ElectronJs. VS Code, SQL Operations Management, Slack, more.

Tools

Innovation

What you can do in a browser?

Virgin Galactic

Age of Ascent “Launching in 2018, Age of Ascent is a truly massive multiplayer game set in Humanity’s near future. It features direct-piloting realtime combat on an unparalleled scale, an entirely player-driven economy, multi-device support – and it’ll even run in your web browser without plugins or installs!”

What about Testing?

When you write JavaScript in a maintainable, modular way you can write unit test and integration tests with Jasmine or Jest (others too) and Karma. Angular and others have this setup ready to go.

I have a small write up about testing Angular, but have had a lot of good experience with Jasmine and Karma.

my tweet

Overwhelmed or Opportunity?

Things are moving fast, which is exciting, but some talk about JavaScript Fatigue. Also many times it feels as if we are drinking from a fire hose. It’s important to prioritize what you are learning and focusing on (which means ignoring things at times or just skimming the surface at other times). We can dig in deep when we need something.

See the gif from https://imgur.com/gallery/w1X4f3j. It was too big to embed in this post.

I’ve chronicled my 11+ year journey of approaching web applications. It’s interesting how things change ove the years to how I’d make a web app.

For some, it makes sense to dig into a subject really deeply and I’m thankful for their expertise. Certifications can help focus that attention and show you’re improving yourself. My company does consulting and I need (and enjoy) to stay up to speed to be able to recommend the right tool for the job.

“Reading 1 hour per day in your chosen field will make you an international expert in 7 years.” quote from Robert Brewer. I think this applies to smaller increments as well. I like to say, “a little bit of learning consistently, over a period of time adds up to a lot of learning”.

More Resources

So you want to be a web developer videos with Dan Wahlin

Web Development in 2018 - A Practical Guide

The Future of JavaScript: 2018 and Beyond from Progress

I’ll also point you to me list that I have already

Keeping Up with the Codeashians. Dealing with our fast paced industry. - I listened to this after writing this article on March 9th, 2018

  • You don’t have to know everything
  • Focus on the core basics (JAM - JavaScript API Markup)
  • Learn Just in time
  • Find ways to learn on the job
    • build a side project to help the team
    • they suggest a couple hours a week of learning (not everyone is 100% productive)
    • add 1 new thing to each project
    • learning a little over time adds up quickly (as I said above)
  • We need to keep up
    • Jobs aren’t always permanent
    • shows learning initiative
    • they didn’t mention it, but you can help elevate your team members if you take the lead and share what you learned
    • older tech may not be able to deliver the experience or what they want
    • newer tech could help deliver value faster and give competitive advantage

Of course, there are myriads upon myriads of videos and articles out there. Have fun and use your time wisely!



comments powered by Disqus

Please consider using Brave and adding me to your payment ledger. Then you won't have to see ads!

Support me and download Brave!

Use Brave