But I don’t wanna use a framework!

Bootstrap, jQuery Mobile, AngularJS, Durandal, Backbone, React…So many frameworks, so little time. Each of these has a place and many are used frequently in the construction of modern mobile sites, particularly those that are being developed in a single page architecture. But what if we really want to simplify the page and not use a framework for page routing and navigation at all? There are those in the developer community who would rather hang up their typing fingers than use something pre-built and to them I say…hey, do what you want. In the case you want to try and build it, it can be done with some HTML5 and CSS and a minimum of JS. Actually it’s kind of pretty…read on for more.

Heydon Pickering (2015) of SmashingMagazine discusses how to simplify and demonstrates so we will borrow from him a little bit. The idea is that you create a container, as is the custom with HTML5 with different IDs for each view. Think of the <main> as the parent and each of the views’ IDs as one of its children. As long as the IDs are developed and utilized in the navigation, you can use the # style of linking to move within the page. As Pickering points out, this type of navigation works even when JavaScript is turned off and it’s REALLY FAST!

Now we get into using some CSS to start hiding the views we are not looking at:


main > * {
    display: none;
}

main > *:target {
    display: block;
}

There is additional wizardly for ordering and also some other examples that Danny Markov(2015) demonstrates on his page. The ability to utilize your own JS and use modern CSS that browsers will read is important for those who do not need the massive overhead of a framework and all the unused code.

Markov, D. (2015, February 5). Making a Single Page App Without a Framework. Retrieved April 14, 2016, from http://tutorialzine.com/2015/02/single-page-app-without-a-framework/
Pickering, H. (2015, December 21). Reimagining Single-Page Applications With Progressive Enhancement – Smashing Magazine. Retrieved April 14, 2016, from https://www.smashingmagazine.com/2015/12/reimagining-single-page-applications-progressive-enhancement/

8 thoughts on “But I don’t wanna use a framework!

  1. Nice post, Michael! I do think that there is much value in coding from scratch, however, using a framework also has its perks! Like you said, what if you don’t want either of these options! I like the approach that you have provided. I had not thought of doing that, but it does seem very simple to implement! Thanks for the information.

    Like

    1. You’re welcome, I’m always happy to oblige my online fans. I’m a big fan of KISS and really keeping it simple. Sometimes the complexity I have seen is truly so someone’s ego can grow by saying…hey, hey, hey look at what I built!” It’s like buying a full china set when all you need is a red plastic beer pong cup.

      Like

  2. Michael, you write so well, it’s almost conversational and more to the point, you enable us to appreciate the technical aspects without overwhelming us!

    Like

    1. The sad part is I don’t even like to talk, so I type. I really just type out the words in my head so it’s kind of like a conversation anyway. When I’m at work, I do a lot of “explain it like I’m five” so I think I naturally just shift toward that. Being a nurse, we have to educate a wide range of the population and being able to adjust to your audience is very important. I have tried to bring that to the IT world.

      Like

    1. I tried to find some simple examples that would work in almost any circumstance. These will work in every modern browser even with JavaScript enabled. You can run into some of the issues seen in your post on tracking though…no bueno!

      Like

    1. Interestingly enough, I have another single page app ready to launch for the GDoT project, that one is based on a really neat template that is quite responsive and fun to play with. It does use JavaScript and Bootstrap so I sort of broke my own rules in the interest of time and flexibility. It just proves that there really is a time and a place for all options.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s