Modern Web Dev

View Github Repository Open presentation in a new window

cjus

See all presentation from cjus

Modern Web Dev

0 0

modern-web-development-presentation

Modern Web Development Presentation

On Github cjus / modern-web-development-presentation

Modern Web Dev

Presented by Carlos Justiniano / HC.JS / @cjus / ver: 2.0.0

About this presentation

  • This is a 30,000 foot view
  • The goal is to convey topic breath and not depth
  • We'll cover what modern web devs are doing
  • Lastly, this is a highly opinionated presentation - it's ok if you disagree
Presentation source at: http://github.com/cjus/modern-web-development-presentation Issues with this presentation? Fix it and issue a pull request --- > The subject of web development is too vast to cover in a short presentation > Because we have a lot to cover I won't be doing any deep dives. > This presentation should be a jumping off point for your own further investigation. > I may not cover your favorite tool. That doesn't mean it's not cool. Definitely tell us about it after the presentation. > So, the goal of this presentation is to discuss web development and to consider what modern web devs are doing these days. > This is my highly opinionated view. You may disagree. As is common in these sorts of things, there are lots of ways to accomplish similar goals. > This presentation is also open source and available on Github. > If you find any issue with this presentation drop me an email or better yet, issue a pull request.

What is modern web development?

--- > So, what is modern web development?

In short, it's about working smarter and not harder...

That's the "modern" bit

--- > In short it's simply about working smarter using tools and automation.

Signs you may not be practicing modern web development

--- > Some signs that you or someone you know may not be practicing modern web development...

If you or your team...

  • build and edit source files using a generic text editor
  • deploy raw files to web servers without packaging
  • work in monolithic source files with no real code organization
  • don't use a library or framework such as: Backbone, Ember, Knockout, React or Angular
--- > Do you or your team - build and edit code using generic text editors? > How about deploying raw files to web servers without packaging? > Does your project contain monolithic files which lack any real organization? > Are you using a home grown framework instead of one of the well established ones such as Backbone, Ember, Knockout, React or Angular?

Or if you or your team...

  • don't have a need for source control - zip files work just fine
  • don't mind manual and repetitive processes as you work on your projects
  • don't use code linters, style checkers, or beautifiers
  • don't do any real testing
--- > Do you feel that file folders and zip files are a convenient ways of tracking your code changes? > Do you repeat manual processes instead of automating them? > Do you think that linters, style checkers and beautifiers are for wimps? > Do you feel that perhaps you don't adequately test your code? > Do you you feel that the beauty and elegance of your code makes it self documenting?

If so, then your dev cycles might feel a bit like this...

If that describes your projects - then your dev cycles might feel a bit like this...

Jane! Stop this crazy thing!

--- > Modern web tools and practices help you take control of your dev cycles > and add predictability to your software releases. > Let's take a closer look.

How can modern tools and practices help?

--- > So, how can modern tools and practices help? > I'm super glad you asked!

By providing better tools and processes

--- > Simply stated: by providing better tools and processes

Tools of the trade

--- > Lets discuss some of the tools available to web developers
--- > But before we begin, let's start with the elephant in the room.
--- > Mac or PC? > Believe it or not, this question comes up more than you'd expect.

Mac or PC?

  • Generally speaking, one isn't better than the other
  • It depends on what you're trying to do
  • For web development, it seems Mac is a clear winner
  • That is, unless you're a .NET developer
--- > Which is better? > Generally speaking it depends on what you're trying to do. > It also depends on your level of taste > and build quality expectations. > I spent the past few years working with startups > in the San Francisco bay area where I attended lots of meetups. > In my experience, web developers seem to clearly favor Macs. > However the same is true at the company I currently work with in mid-town New York. > So I'm not sure it's a east versus west coast thing.

Why Mac?

  • Most servers on the web are running Linux
  • MacOSX is based on Unix, you get a compatible terminal environment
  • The products you run on Linux based servers, often have binaries for Mac: Apache, Nginx, Redis, MongoDB etc...
  • Develop native iOS and Android mobile applications
  • Fact is you can do all of this on a PC, it just requires you to run more software while leaping through hoops
--- > There are some reasons this might be the case. > The web is powered by Linux machines. > For developers working with Linux, Macs offer compatible terminal environments > The two very popular web servers, Apache and Nginx were both born and bread on Linux. They run natively on Mac without the need for extra software to manage them. > For a long time, most popular Internet software didn't even run on Windows. > Microsoft has invested heavily ensuring that's no longer the case. Largely because of their Azure, cloud platform. The company that was allergic to open source is now embracing it. > A lot has changed in recent years. > Another consideration is if you're developing native mobile products on iOS or Android > Macs allow you to do both. > So what if you're stuck with a PC? > We have a saying in photography... the best camera is the one you have have with you. > The fact is that you can do all this on a PC, it just requires you to jump through more hoops.

That said, some folks like that sort of thing

--- > That said, some folks like that sort of thing

What about VMs?

  • Virtual Machines are software based machines
  • Using VM software you can run a Linux machine on your Mac or PC
  • Virtual Box: https://www.virtualbox.org
  • Vagrant: https://www.vagrantup.com
  • Docker: https://www.docker.com
--- > What about VMs? > A popular option is to use virtual machine software > on your Mac or PC, in order to run Linux. > I use Macs and my work laptop has a linux VM running so I can develop locally while accessing a web server that routes calls to company API servers. > Oracle has a free VM product called Virtual Box that runs on both Mac's and PC's. > Vagrant is a product that can sit on top of Virtual Box in order to allow developers to setup lightweight and portable development environments. > The idea is that by hosting your dev environment in Vagrant, every member of the team can have identical local access to the same type of environment. > Docker is a platform that has taken the developer community by storm in recent years. With Docker you can create an application and distribute it to other developers for local use and to sysadmins for deployment to cloud servers. The entire docker movement is part of a trend called containerization where applications are placed in virtual containers. > In truth, the containers are hydrated, meaning that what is shared is a definition file that can be used to download and configure an application... but that's getting a bit more technical. > So lots of options, each with pros and cons.

Ubuntu Linux running in a VM under Windows 7

--- > Here we see Ubuntu Linux running in a VM under Windows. > This totally works. However, it's not the speediest of things. > If you have a machine with lots of memory and spare CPU cores then YOU might be just fine. > I've done this on an 8GB Dell with quad core CPUs and solid state drives and it was managable.

Text Editor or IDE?

--- > OK, let's move on to Text editors and Integrated Development Environments or IDEs.

Text editor or IDE?

  • Any text editor will let you edit code
  • A text editor designed with web dev in mind will do far more for you
  • An Integrated Development Environment (IDE) complements its built-in text editor with a host of integrated tools
  • However, today's modern editors feel like lightweight IDEs
  • It's not aways easy to decide which one is best for you
--- > Any text editor will let you edit your code. > However, a text editor designed for web development will help you do much more than just editing. > At the opposite end of web friendly text editors are IDEs, Integrated Development Environments. > These products typically integrate tools which extend what you can do within a common environment. > For some, such as yours truly, this can be a nice advantage. > For example, text editors don't typically allow you to debug your code from within the editor - instead you do this outside of the editor. Where as, some IDEs allow you to debug right inside the IDE. > It is worth noting that many of today's web dev text editors go beyond being basic text editors and also offer a fare amount of tool integration. > It's definitely not easy to decide which one is best for you. > Most devs simply use > whatever the cools kids are using... > what ever that might be this week. > My tip for you is to compare the costs, and features and see which one best fits your needs. For me, webstorm offered the ability to debug node applications and that was and remains an important feature.

Modern web editors and IDEs

  • Allow you to do more than just edit files
  • They include support for plugins which can integrate linters such as JSLint and JSHint to help you spot errors
  • They allow you to more quickly create HTML and CSS, checkout http://emmet.io/
  • Some even understand JavaScript syntax to allow you to more quickly navigate your source files
--- > A wikipedia page list over 75 text editors. > However, modern web editors differ from their older counterparts by being designed to support developers working on web projects. > A super popular editor is Sublime. > Another is Webstorm, which is more of an Integrated Development Environment (IDE) than just an editor. > Which you use depends on your needs. > Both Sublime and Webstorm need to be purchased, however, excellent free options include Brackets.io and Atom.
  • This is an IDE called WebStorm
  • The panel on the left shows a project file structure
  • Bars at the top contain quick access features and navigation helpers
  • The panel on the right shows a text view. The red line in front of the closing section tag shows us an error
--- > Here's a screen shot of WebStorm. > We can see that our window view consists of panels, each of which serves a distinct purpose. > At the top of the window we see quick access features and navigation helpers. > Notice how we can see that we're looking at the section tag which is inside of a div with a class name of slides which is inside of a div with a class name of reveal. > We can also click on those tags to quickly navigate the html document. > The panel on the far left shows a project file structure, while the larger panel region on the right shows our source file. > Notice the red squiggly line just before the closing section tag. > This indicates an error which the IDE found for us. If we hover our mouse cursor over the red line we'd see that the cause of the error is a missing a closing aside tag. > So that's an example of an editor can help make your job easier.

JSHint integration

--- > This is Webstorm again, here we see JSHint integration where we're being alerted to something we shouldn't be doing.

Debugging a NodeJS app

--- > In this example I'm debugging a NodeJS app. > The sever just received an HTTP request which I'm inspecting.

There are lots of great code editors to choose from!

  • Sublime ($70): http://www.sublimetext.com/
  • WebStorm ($99): https://www.jetbrains.com/webstorm/
  • Atom ($0): https://atom.io/
  • Brackets ($0): http://brackets.io/
  • and many many more...
--- > This is a list of popular options, but by no means a comprehensive list. > Both Sublime and Webstorm are commercial, but Atom and Brackets are both free. Don't let the cost fool you. You'd be surprised by what both Atom and Brackets can do. > One fun fact about Atom and Brackets is that they're actually built using HTML, CSS and JavaScript - which really speaks to the power of modern web technologies.

Debugging in the browser

  • Yes, you can use your web browser to debug your site.
  • Modern browsers include a suite of built-in tools
  • Firefox and Chrome have excellent tools for web developers
  • Google Chrome Canary: https://www.google.com/chrome/browser/canary.html
  • Firefox Developer Edition: https://www.mozilla.org/en-US/firefox/developer
  • ProTip: Master those tools!
--- > OK, this one might be obvious, but not necessarily for people new to web development > Modern web browsers have built-in tools which can be used to diagnose a wide variety of web related concerns. > From the profiling of network calls to the debugging of program state using breakpoints. > If you only casually use those tools, then you may not be getting the most out of them! > Have a deeper look. > As a modern web developer you should be using Chrome Canary or Firefox Developer Edition.

Improving code quality and reducing errors

  • Use JSHint: http://jshint.com/
  • Use js-beautify: https://github.com/beautify-web/js-beautify
  • Use JSCS (JavaScript Code Style): https://www.npmjs.com/package/jscs
  • Good news: your (modern) text editor might already support plugins for these tools
--- > One area that makes a huge difference is code quality. > The more error prone your code, the less likely it will meet customer needs. > Modern devs understand that through code reviews are time consuming and policing code is a thankless job. > You just end up pissing off your fellow devs. > That's why successful devs use tools like jshint or jslint to spot errors and questionable practices. > They also use tools like js-beautify to spots code that's not properly formatted and JSCS (The Javascript code style checker) to ensure that code maintains an agreed upon look and feel. > The good news is that many editors, (especially the four we looked at) include support for these tools.

Helper libraries

  • jQuery, jQueryUI
  • BootStrap
  • Underscore and Lodash
      _.uniq([1, 2, 1]);
      // → [1, 2]

      function timesThree(n) {
        return n * 3;
      }
      _.map([1, 2], timesThree);
      // → [3, 6]
--- > There are lots of add-on libraries that can help you develop web applications. > jQuery in particular has become a staple for most web developers. > Libraries like BootStrap allow you to quickly style an application. This has been a god send for artistically challenged developers the world over! > Libraries like Underscore and Lodash offer something entirely different. They provide developers with new programming statements (really functions) which simplify common programming tasks. > They offer a pattern inspired by functional programming, which has been proven to lead to fewer errors. > Take the _.uniq statement for example. Given an array it returns an array of unique values. > Handy right? > Next we have a function called timesThree which multiples a number argument by 3 and returns the new value. > By using the _.map statement we can take an array of values and map them using the timeThree function, that is, pass each array element to the timesThree function and store the resulting values in a new array. > Lodash is considered the more feature rich and modern of the two, but check out both underscore and lodash. > This brings us to an interesting challenge. > The more libraries we add to our projects, the more we need a tool to maintain and manage our app's dependencies.

Maintaining your app's dependencies

  • Modern web apps often include lots of package dependencies
  • From jQuery to Bootstrap to a libraries such as Ember or React
  • Tools exist to manage project dependencies. Get to know Bower - a package manager
--- > Modern web devs use dependency package managers such as Bower and NPM to manage their project dependencies. > You basically list your dependencies in a configuration file so anyone team member can grab the project code and easily install required dependencies. > A package manager such as Bower will help you track and maintain your app's dependencies. When it comes time to upgrade a package you can use Bower to download and install the latest version.

Preparing files for the web

  • Modern web applications require that files be optimized and packaged for web deployment
  • Often using a combination of concatination and minification
  • It's not just for JavaScript, minifiers exists for HTML, CSS and image files!
--- > Improving site performance can lead to a competitive advantage as customers prefer your site over your competitors. > In a study, Amazon determined that a page load slowdown of just one second could cost them $1.6 billion in sales per year. > Google determined that if its search results were four tenths of a second slower they could lose 8 million searches per day. The result of which would be millions fewer online ads. > Clearly, performance matters. > Optimizing a web application for production use involves intelligently packaging site files so that they take up less space and load faster. > This process involves tools called minifiers which translate file contents into smaller version by renaming code variable and doing things like removing white space characters. > Minifiers exists for HTML, CSS and JavaScript. > There are also image minifiers which change the compression ratio on images to reduce their size without impacting quality in a noticeable manner. > If you're not using one of them, check them out! > We'll talk more about this shortly.

Get with Git

  • It's distributed source control - for you and your team!
  • Seriously - source control - it's not optional!
  • Why Git is better: http://thkoch2001.github.io/whygitisbetter
--- > You should be using a source control system for all of your work. > There's no good excuse for not doing so. > The benefits of a source control system is that you can track changes to the work you're doing. > How many of us haven't at one time or another wished we could go back to an earlier version of a file - even if just to compare it against a more recent change? > Seriously - source control - it's not optional! > One, free and wildly successful source control system is called Git. Git was initially created by Linus Torvalds (the creator Linux) back in 2005. > Github is a service which is based on Git, but adds loads of additional social features.

Transpilers

  • Tools that convert from one language to another
  • Typically for the purpose of extending or simplifying a language or using language features before they become widely available
  • Examples include: CoffeeScript, SASS/Compass, ES6 to ES5 transpilers, such as Traceur and BabelJS
  • There's Asm.JS to enable C++ to JS transpilation
  • Checkout: https://developer.mozilla.org/en-US/demos/detail/bananabread
--- > Transpilers are tools that convert from one language to another. Typically for the purpose of extending a language or using language features before they become widely available. > Examples include: > CoffeeScript, a transpiler that simplifies JavaScript for Ruby developers terrified of actually learning JavaScript. > Ok, cheap shot. > Ex: SASS/Compass, empowers devs with more expressive CSS which gets transpiled to CSS3 during a build process. > Then there's Asm.JS to enable C++ to JS transpilation. > BTW, If you haven't seen the Bananabread demo you really should check it out.

Use JavaScript libraries and frameworks

--- > Hint... this is not the Beatles.

JavaScript libraries and frameworks

  • Lots to choose from
  • Adds structure to your application
  • Helps improve maintainability and testing
  • Offers battle hardened code
  • Dictates how module will be built
--- > There are dozens of JavaScript libraries and frameworks to choose from. > They each provide ways of helping you structure and build web projects. > For non-trivial projects you really should be using one of them. > Which one you **should use** can be a subject of some heated debate. > As a project increase in size, more devs end up touching the code. > Worse though is that not all of the devs end up sticking around. > Quite often the original developers are long gone. This is why choosing a well-known library or framework (which you didn't invent) can help when it comes time to hire new developers. > So if you chose to use say Angular, you could hire or train developers to write code consistently with the rest of the project. New team members then simply need to learn where files are stored and how the project is assembled in order to get up to speed. > Best of all > they can use books and online training materials to get up to speed. Again, because you didn't invent the framework there's a greater chance that you'll find a helping hand when you need it. > JS frameworks help with a concept called "Separation of concerns" by introducing other concepts such as Models, Views, Controllers, Service, Routers and other good stuff. > That in turn helps add structure and help improve maintainability. > Another great benefit is that they provide you well tested and battle harden code which you didn't have to write yourself! > As would be expected, there are significant framework differences. A key difference is in how opinionated they are. > That is, on how they believe you should structure your application. > A library like backbone.js has less opinions than a full-blown framework such as AngularJS. > Some differ in how there allow you to interact with the DOM. Angular for instance, specifies how and when you should do so. > Which library or framework you use > depends on which opinions (points of view) you're willing to accept. > Unless you suffer from not invented here syndrome, you will probably benefit from one of the many available frameworks.

Enter Web Components

--- > Web components are actually set of web standards for developing components. > You'll use those components to build applications.

Posed to change how we develop web applications

  • This will impact how we work with all major frameworks
  • Web Components are actually a group of standards
  • There are four key pieces that are used together: Templates, Custom Elements, Shadow DOM, HTML Imports
  • Custom Elements in particular allow you to create your own HTML elements
      <fancy-dropdown></fancy-dropdown>
--- > This will result in a new web component eco system where you'll be able to buy and sell components > So this has been in development for the past several years. > Web components are still relatively new in terms of any widespread deployments, but this new tech is posed to change how we work with all major frameworks. > This is definitely a technology to learn about and prepare for.

To infinity and beyond!

Hosting in the cloud

  • Hosting in the cloud has never been easier or cheaper
  • This is an important skill every modern web developer should have
  • Amazon, Heroku and DigitalOcean offer services to fit every budget
--- > It's never been easier to host your projects in the cloud > This is a skill every modern web developer should have. If you don't already do this. Take the time to learn how. > Amazon, Heroku and DigitalOcean offer services to fit every budget > AWS is the most feature rich, but harder to use service > Heroku is the easiest to use but most expensive for production use > This is why it's not uncommon to see developers build their app on Heroku and later migrate to AWS.

Bringing it all together

Use a build tool

  • Use JS friendly build tools such as Grunt and Gulp
  • Both are build systems which include a massive collection of plugins for doing just about anything you need to in the life time of your project.
  • They can help you do everything we've already discussed and things like pushing your code to cloud services such as Amazon and Heroku and your assets to content delivery networks.
--- > So everything that we've discussed so far fits neatly under the umbrella of a build system such as Grunt or Gulp. > They each feature a massive library of plugins for things like automatically checking your JavaScript for correctness, running tests scripts, packaging your projects and deploying them to the cloud and much much more. > If you're not using these tools now, they should be in your future - set aside some time to get to know them.

Preparing files for the web

  • Get to know Grunt or Gulp
  • Example: modern-web-seed project at https://github.com/cjus/modern-web-seed
  • The plugins I uses: gulp-jshint, gulp-angular-templatecache, gulp-sass, gulp-uglify, gulp-jscs, gulp-jsbeautifier, gulp-usemin, gulp-minify-html, gulp-minify-css, gulp-ng-annotate, gulp-rev, gulp-imagemin, imagemin-pngcrush
  • Yo! use Yeoman: http://yeoman.io
      $ gulp dist
--- > We talked about Build tools such as Grunt and Gulp earlier. > I use Grunt at work and Gulp personally. My modern-web-seed project uses the plugins listed. From the names, you can probably guess what each one does. > Checkout it out to see how the tools we've discussed can all work together under a Gulp automation to build an application. > The really cool thing is that most of those plugins run when I type gulp dist. > This is serious automation and a major time saver during development > When you're ready to do this on your own projects checkout Yeoman.

Continuous integration

  • A tool that periodically builds your product in the background and sends you messages if your build doesn't succeed
  • Runs your tests scripts as well
  • Consider this an early warning system *before* your build makes it to QA and long before it makes it to production
  • Here are just few services to consider: Jenkins, Travis, CodeShip and Drone
--- > Continuous integration (or CI as it's commonly called) is a process whereby your project is build and tested periodically > Modern web developers recognize the value of automation > and if we can automate some of our testing then we're better off! > As an early warning system, CIs are a major time saver because issues are identified as you develop and check in your code > This can help the guy who insist on checking in seemly simple code without testing it. > Tip: Don't be that guy!

Formulating a plan of attack

  • Work incrementally. Don't try all this at once.
  • Get comfortable with a tool before moving onto the next.
  • Ask for help when you need it.
  • This was all new, at one time, to everyone who went down this path!
--- > So there are lots of tools that modern web devs use to step up their game. > This might all seem overwhelming but having a plan of attack will help you get through it. > Focus on a specific tool or process until you're comfortable with it. Then move onto the next. > Ask for help! It's one of the reasons we host these meetups - so we can create a community around support. > And most of all remember > at one point each of these things was new to each of us.

Contact

  • cjus on Twitter and Github
  • Email: cjus34@gmail.com
  • About: http://cjus.me