The next steps

27 May 2016

The next steps 2016

Technology really has progressed far. We can with just Javascript build native mobile and desktop applications. We can build frontend AND backend!

Pre

In 2012 I was building responsive websites and interactivity with the jQuery library, adding eventlisteners, toggling classes, looping through elements, measuring, slideing and animation; Mostly DOM-manipulation. I was testing out all the CSS-preprocessors, Stylus, Less, Sass and then stuck with Sass(SCSS).

The workflow was just editing .PHP or .ASPX files and reloading when you updated your scripts or styles. The scripts were almost manually concatted and versioned by hand in my world. Not until I came across task-runners such as Grunt my process and workflow was just like that.

But with Grunt alot changed actually, you no longer needed OS-dependant applications to process your Sass, nor did you need to manually bundle your javascripts. Taskrunners even handled image optimizations.

Parallel to my universe and bubble, web-apps were appearing and exploding, native apps were already a thing, but were mostly for Java or C developers. To me it was really appealing, doing nice transitions between views, saving data in the client dynamically loading in views and not even having to reload the page to get to the next page(!).

This was the time when Angular reached my knowledge.

Tech order “JS reign over all”

Part 1

  • jquery
  • bower
  • bootstrap, ui frameworks

Part 2

  • node, npm
  • sass, less
  • grunt, gulp

Part 3

  • atom
  • webpack
  • commonjs, requirejs
  • angular, react, redux

Part 4

  • ng2, JSX, react
  • es6, typescript, nativescript
  • electron, ionic, cordova, phonegap

Future / Possibilities

Greater experiences in apps, desktop, mobile and webb. Cross OS, Cross plattform.

Weakpoints / Dangers

To big scopes, bad quality, new tech.

How to get there / Invest

Balance legacy tech with research and challenges in the new tech.

When there / Profit

b2b apps, b2c webb, build plattforms and tools for companies.

Future / Possibiities

  • full suite of applications
  • ecommerce, webapp
  • mobile app
  • desktop app
  • plattforms

Products and services

With the technologies beeing at the state they are, with the web technologies we have at our hands the possibilities of servivices we as webworkers can supply. We can, with technology we used to use for building interactive websites, build and compile native mobile apps and now even cross plattform desktop applications!

The commerce scenario

The first and foremost communication might still be in the shape of a website with of social media interaction, SEO optimized content, landing pages and campaign content. Supported by an app for loyal customers, with all their preferences filled in, when and where they work, their needs and patterns saved and understood in order to serve them their goods/services in a fashion adapted to just them.

Other sorts of customers, B2B, or maybe even internal personel might have advantage of having a desktop application in wich they control sales, analyze, setup reccurring orders or internal education plattform.

Plattform

Maybe just serving customers and companies these hands on applications (apps for web, mobile, desktop) might not be sufficent. Maybe the thing to do is look at it from a further distance, to see that the need actually is some kind of plattform for navigating all these applications, services and portals of information.

Part 1

Built websites and interactivit with jQuery as DOM-manipulation-lib. Used some jQuery plugins to do sliders and things like that. If ever, we used bower to keep track and install dependancies. Most of the time there were smaller projects where only a few people who were introduced to the project, so keeping track was not that much of a task at this time.

Part 2

Tooling was stepping up, we could use grunt instead of some “webkit” GUI to process and compile our Sass into CSS, bundle our javacripts etc.

Building web got a bit more complex while also easier to be productive, you had to be a bit more devops than before (if noone else where setting up your tasks etc).

Standards and best practices were popping up on how to use Grunt/Gulp and your bundling and compiling, also how to not setup your Sass projects for chaos.

Part 3

Once again tech improved tooling and took everything a step forward.

Atom, the open source editor, built with web technologies (HTML, CSS and javascript). Shortly after Atom was announced, other similiar editors popped up, like VisualStudio Code (also Microsoft got their whole open source plattform independant drive going/started in this time)

CommonJS, RequireJS, the module loaders of javascript. With the taskrunners around, using a module loader for your javascripts is a breeze. Writing and maintaining small modules make projects easier to maintain and also build. Re-using modules to quickly get going is also a great feature of this module thinking.

In this same chunk comes Webpack, a taskrunner that came in the same wave as React and JSX. Webpack enables some even further abstracting, and one feature that caught my eye was defining payloads. In webpack you can define packages, packages that contain just the parts you want them to contain in form of CSS and Javascript. Wich is crucial if you want to deliver assets of an entire app/website while still maintaining performance and saving bandwidth.

I also want to mention CriticalCSS as a thing. CritialCSS is a thing where you embedd the CSS needed to paint “the fold” right in the head. Then asynchronous loading the rest of the CSS. With this is mind, and as a goal, you need to setup your tooling in a way to help you from going insane with manual labour.

Angular in this segment is a pretty mainstream framework, stable and aknowledge as a real thing and as a viable tool in building websites. Google at this time had alot of their own services built in Angular.

Shortly after Angulars entry to the scene, the React library came and was a bit more lightweight, not serving the entire suite of features Angular did or does but while being alot more performant while giving another kind of architecture to work with it started growing.

Webcomponent specs

With the birth and actualization of Angular and React I can just imagine they were born out of the spec for webcomponents. Angular say themselfs that Angular is an extension of HTML, wich webcomponents is supposed to be. And also in Angular, you kind of can build you own webcomponents.

Others “honorable mentions”

Part 4

With the progress of the EcmaScript specs, ES2015 (also ‘ES6’) so have the library and frameworks taken advantage or prepared their stuff for the new upcomming standards and needs for tooling.

Angular have gone from 1.x to re-doing all of their architecture in a 2.x version wich in time of writing recently became RC. Angular 2 is writting with the support of all kinds of languages (or flavors of javascript)(: TypeScript, ES5/ES2015 & Dart). Other who have seen the advances Javascript has taken in the webcommunity, they wanted to fix the things that were missing in Javascript, “so naturally” (:D) they made the superset of EcmaScript (features who reach stage 3 are implemented) and added the ability to add types. Today they call it TypeScript.

With the entry of React to the community they also brought JSX to the world.

Angular also have the same kind of “embed the logics and templates together” example ng2 component from their tutorial.

Webapps, Apps and desktop Applications

With Javascript you can build alot of diffrent things, and in this last part of Part4 I want to tell you that you can actually build desktop apps with Javascript. With Electron (atom.io project) you can build desktop applications with Javascript.

The part about apps in javascript, you can build mobile apps with Ionic framework (wich is tightly coupled with Angular(1.x)). You can also use Cordova or PhoneGap to get a mobile app going with Javascript.

Of course there are some boilerplating involved with these frameworks and SDKs, wich I will get to in the continuance of the post.

Future / Possibiities

  • full suite of applications
  • ecommerce, webapp
  • mobile app
  • desktop app
  • plattforms

Products and services

With the technologies beeing at the state they are, with the web technologies we have at our hands the possibilities of servivices we as webworkers can supply. We can, with technology we used to use for building interactive websites, build and compile native mobile apps and now even cross plattform desktop applications!

The commerce scenario

The first and foremost communication might still be in the shape of a website with of social media interaction, SEO optimized content, landing pages and campaign content. Supported by an app for loyal customers, with all their preferences filled in, when and where they work, their needs and patterns saved and understood in order to serve them their goods/services in a fashion adapted to just them.

Other sorts of customers, B2B, or maybe even internal personel might have advantage of having a desktop application in wich they control sales, analyze, setup reccurring orders or internal education plattform.

Plattform

Maybe just serving customers and companies these hands on applications (apps for web, mobile, desktop) might not be sufficent. Maybe the thing to do is look at it from a further distance, to see that the need actually is some kind of plattform for navigating all these applications, services and portals of information.

How to get to there? Investment

In order to make money today, serving todays customers while also going towards the goal of learning and using the next steps technology we need some kind of balance.

To me, the cost of not jumping on the train of what is to come means that either I’m useless or I am working at a company using second tier technology. Using second tier technologoy, serving second tier products means that new talent will not show up, customers will have second tier products sold to them.

Also as I know of these technologies, I cannot myself jump on and just add them to my repertoar, I need to focus on some parts, some toolings and technologies. And you can’t either as a successfull living person, with a balanced life with friends, work and exercise also have a fulltime study of new standards and technologies.

“The cost is too damn high!”

I have in the past, done research and studied and learnt technologies, tools etc by myself, but today, the price is too high, I cannot afford to spend the same time researching and learning outside of work as I used to. Not just because of my family part, but because today I have greater understanding of technologies, that it is too hard, and too much to choose and learn from, that I need help. I want that help to be where the rewards will be reckt.

The plan

In order to keep knowledge high and making already hired co-workers learn these new technologies, we need to balance their days and hours so that we all make progress in current and new technologies.

New and old

Doing prototypes and having assigned lab projects that you might present and demo to fellow employees. Make an event, make a compettition, or just assign a group to solve a problem using new technologies, make them present the solution and also what they woulld have wanted to be diffrent or features that they were missing in the tooling or plattform.

while learning new things it is also important to let people who aren’t familiar with current tech-stack catch up or improve in their current respective fields. Doing code reviews and presenting features and projects in the same fashion as with the new tech would not only improve their knowledge but also further fortify the methods for the new-tech demos.

When there, profits?

Now we have methods and balance in the working enviroment, people are increasing knowledge in current and new tech while we are making money. We have a stronger workforce, happier workforce, more hireable workforce we need to take care of these new rockstars keep challenging them in ways to stimulate and keep them motivated and learning.

We have with all the technological progresses broadened and narrowed our services and products while having fun and learning together.

codepen pen arrow-right arrow-down arrow-left twitter github