Svelte: Web development made simple

Standard

*this post is the 4th of a 4 part series of posts exploring Supabase, Vercel & Svelte. This post goes deeper into Svelte (and its application framework SvelteKit)

Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

In a previous post, I explored why a trio of technologies—Supabase, Vercel, and Svelte (along with its framework, SvelteKit)—constitute my ideal tech stack presently.

This time, I’m turning the spotlight on Svelte and SvelteKit. Both have rekindled my passion for front-end development, presenting a fresh perspective on building interactive web applications.

The Pursuit of Developer Happiness

I’ve considered myself to be a “full stack developer” for a long time, but the front-end web development part of the stack was always my “weak” area. I always neglected this part of my arsenal because it didn’t bring me joy. Doing “more with less” is the mantra that brings happiness to my work, and web development, up until recently, just seemed to get in the way of my productivity.

Recently, I’ve fallen back in love with front-end development due to Svelte (and SvelteKit).

It Should’nt be this Difficult

Over the years I’ve seen websites and apps become more complicated.

I’ve gone through several iterations of JavaScript frameworks, tools and libraries to catch up with this complexity. Over these iterations, unfortunately, the developer experience (DX) has not significantly improved and has become arguably worse.

The situation is exacerbated by the need to support an ever-growing array of devices and screen sizes, requiring responsive and adaptive design techniques.

User expectations for rich, app-like experiences have soared, demanding more sophisticated front-end and back-end logic, including real-time interactions and improved performance.

Additionally, the importance of SEO, accessibility, and security has led to yet further layers of complexity.

Lastly, development workflows have become more intricate. Developers need to be aware of CI/CD pipelines, cloud-based services, and the necessity for cross-disciplinary skills spanning design, development, and deployment.

All these factors have contributed to a landscape where web development demands a broader, more sophisticated skill set.

Developers need to constantly have a deeper understanding of a rapidly changing technology ecosystem.

Using an “opinionated” application framework has helped me to manage these complexities and increase my productivity.

For complex web apps, vanilla JavaScript is arguably always an option. However, I can imagine being highly frustrated by the verbosity of the resulting code. To reduce the amount of code, I could imagine ending up writing a pseudo framework to abstract most of the verbosity. For those who dare, I salute you. But I’d personally rather skip straight to using a battle-tested framework to reduce code complexity.

However, not all frameworks are created equal.

For me, an ideal framework is one that can do more with less code without compromising on flexibility and speed. A great developer experience is also a must to maximize developer productivity.

In Svelte, and its application framework SvelteKit, I feel that I’ve got a great mix.

My Svelte Discovery: From Experimentation to Production

My adventure with Svelte began as a weekend experiment.

After liking a recent foray into using VueJS, I was curious to explore a framework that compiled down to vanilla JS but promised a declarative coding experience.

The initial trial was for a small project aimed at enhancing a local community initiative. The objective was straightforward: deliver an engaging, performant web experience with minimal overhead for both the developers and the end-users.

To my delight, the project was not only a success in terms of its community impact but also a revelation in web development efficiency and simplicity.

Svelte, coupled with SvelteKit for seamless full-stack integration, transformed how I now approach front-end development, leading me to adopt it for several subsequent production projects.

Workflow Integration and Development Joy

Svelte’s integration into the developer workflow is seamless.

Its component-based architecture—enhanced by reactivity and compile-time optimizations—fits perfectly with modern development practices.

Furthermore, SvelteKit enriches this experience by offering a convention-over-configuration approach to building applications, from static sites to SEO-friendly SSR (Server-Side Rendered) applications and everything in between.

This framework has a unique proposition: write less code, without losing expressiveness or functionality.

For a developer who values both productivity and performance, Svelte’s proposition is incredibly appealing.

Unified App and API Development

A pivotal moment for me was utilizing SvelteKit’s ability to cohesively handle application logic, SSR, and backend APIs within the same project repository.

SvelteKit’s file-based routing and server-side capabilities mean that an application’s front end and its backend API can live side by side. This co-location streamlines the development process, especially for small teams or projects where agility and speed are paramount.

Performance Outsourced

SvelteKit, the application framework built on top of Svelte, offers several performance advantages over other JavaScript frameworks. These advantages can make it an attractive choice for developers focused on building highly efficient and fast web applications.

Here are some of the notable performance benefits:

  1. Compilation Step: Unlike frameworks that rely heavily on runtime interpretation (like React or Vue), Svelte moves much of the work to compile time. This means Svelte compiles components into highly optimized vanilla JavaScript at build time, reducing the need for a heavy runtime library. As a result, the final code shipped to the browser is leaner and faster to execute.
  2. Less Boilerplate Code: Svelte’s design philosophy emphasizes simplicity and minimalism, resulting in less boilerplate code. This not only makes development faster but also leads to smaller bundle sizes, which directly impacts load times and performance.
  3. Built-in Page Routing and SSR: SvelteKit comes with built-in support for page routing and server-side rendering (SSR). SRR can significantly improve the performance of web applications. SSR ensures that pages are rendered quickly on the server, reducing the initial load time. Client-side routing allows for seamless navigation without reloading the page. All this helps to create a smoother user experience.
  4. Efficient Reactivity Model: Svelte’s reactivity model is designed to be very efficient. It updates the DOM directly when the state changes, without the need for a virtual DOM diffing algorithm. This results in faster updates and interactions, as there is less computational overhead involved in making UI changes.
  5. Integrated Tooling: SvelteKit offers an integrated development environment. With features like hot module reloading, development time is sped up and optimizations are easier to implement.

These advantages make SvelteKit an appealing option for developers prioritising performance and efficiency in their web projects. However, the best choice of framework also depends on specific project requirements, existing developer skill sets, and other factors.

However, for myself, working with small team greenfield startups, the choice has been simple.

Embracing Svelte: A Testament to Developer-Focused Design

In conclusion, my journey with Svelte and SvelteKit has been nothing short of transformative.

These tools have not only simplified the development process and codebase size. Using Svelte has also resulted in superior end-user experiences—fast, engaging, and accessible web applications.

For developers and teams navigating the complexities of modern web development, looking for a balance between productivity, performance, and user experience, Svelte and SvelteKit offer a compelling, developer-friendly pathway.

*this post is the 4th of a 4 part series of posts exploring Supabase, Vercel & Svelte.

Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

Vercel: Developer-focused, powerful & cost-effective

Standard

*this post is the 3rd of a 4 part series of posts exploring Supabase, Vercel & Svelte. This post goes deeper into Vercel

Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

In a previous post, I outlined why Supabase, Vercel & Svelte make up my current ideal technology stack. This post delves deeper into Vercel and why it has helped me fall in love with full-stack development again.

Productivity as a Priority

As a “seasoned” software engineer, I’ve battle-tested numerous deployment & hosting platforms.

I am always on a quest for a more streamlined, developer-friendly approach. The goal is always to give developers space to focus on the things that really matter.

That search has led me, again and again, to Vercel in the past few years.

Here’s my personal take on why Vercel has become an indispensable tool in my development stack.

Discovering Vercel: Weekend project to production apps

My journey with Vercel began during a weekend project launching a web app for a local charity.

The goal was to deploy an easy-to-use and maintained web application. The app should be created with minimal fuss and minimal cost to the charity.

Over the course of the weekend, I was able to create a web app & CICD pipeline at Zero ongoing cost to the charity.

Since then I’ve used Vercel on a number of other production projects.

Seamless integration with developer workflows

The biggest selling point of Vercel is its seamless integration with developer workflows.

An estimated +100m developers incorporate GitHub somewhere in their workflow, I am one of those 100m.

Vercel hooks easily into your GitHub repo. After linking to GitHub, vercel automatically recognises what type of project you’ve got going on. Vercel then automatically builds and deploys your web-based and/or node project every time a branch is pushed.

It may sound like a simple thing, but it saves a huge amount of time, complexity, and expense for a significant number of web & node developers.

This single feature, coupled with a host of other performance and developer-focused features, makes Vercel highly persuasive for web and node developers.

Develop App & API together

A big game changer for me was the ability to develop & deploy my [web] apps and APIs at the same time.

API and APP in the same repo

If you include an “API” folder in your repo, Vercel “automagically” spins up a serverless function to serve the endpoints.

Being able to develop an App and API in the same codebase is a big win for smaller startup teams where the code is changing rapidly.

There is no disconnect between the two; if a new feature or API route is deployed, they are deployed with the front-end changes and not out of sync.

Even better, if you are developing with Node for your API, and a JavaScript framework for the front end, the same developer can understand and update both aspects.

Performance as someone else’s problem

Vercel doesn’t just deploy your application; it helps optimize and scale it.

Leveraging global content delivery networks (CDNs) and smart caching strategies helps your application load fast, regardless of where your users are.

Whether your webpage or API experiences a handful of users or a sudden surge in traffic, performance remains consistent.

This peace of mind, knowing that scalability and optimization aren’t something I have to actively manage, allows me to focus on other, client-centric, tasks.

Vercel Pricing (March 2024)

The Cost

The pricing tiers underline the feeling that Vercel was built for developers, by developers.

For smaller teams, being able to quickly try out ideas at no cost, allows them to iterate at speed.

Not having to raise a purchase order or ask engineering for some server resources, just to create a proof of concept, is perfect for startups and small teams.

Even when you get past the proof of concept stage, the pricing is extremely persuasive for small and large teams alike.

Embracing the Future with Vercel

My experiences with Vercel have made it a staple in my development workflow.

The ease of use, performance optimizations, and scalability it offers are fantastic for the types of projects I regularly work on (small team start-ups).

For any development team, in a similar situation, looking to streamline their development & deployment processes, I can’t recommend Vercel highly enough.

*this post is the 3rd of a 4 part series of posts exploring Supabase, Vercel & Svelte.

Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

Supabase: Making development easy, scalable & affordable

Standard

*this post is the 2nd of a 4 part series of posts exploring Supabase, Vercel & Svelte. This post goes deeper into Supabase

Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

In the previous post I outlined why Supabase, Vercel & Svelte make up my current ideal technology stack. This post delves deeper into Supabase and why it has helped me fall in love with full-stack development again.

What is Supabase?

Supabase is a managed service which encompasses (but is not limited to) all of the following: authentication, database, file storage & serverless functions.

Supabase is like other “backend as a service” (BaaS) offerings like Firebase, but with a few notable differences; the project is open-source & is centred around an open-source relational database (Postgres).

What makes it so useful?

As I have lamented in the past, app development is complicated. Anything that reduces stack complexity can help focus developers on the things that really matter.

I tried Supabase for a weekend project for a local charity and achieved so much in a single weekend that I would consider myself an advocate for the product.

Following that experience, I have now used Supabase successfully for two additional production projects and plan to use it in the future for similar scenarios (small team startups).

Advocating Supabase at a JavaScript meetup. Slides below…

Creating a relatively simple app over a weekend is not a huge accomplishment. There are other services and no-code platforms that can do something similar in the same timescales.

However, experience has taught me to get into the weeds with a product and then extrapolate into the future to gauge the real value of a tech stack. Low code and no-code tools are great, but at some point, in a growing project, you will hit a wall.

What makes Supabase stand out is that coupled with other developer tools like Svelte, it can be at least as productive as no-code tools without the drawbacks e.g. vendor lock-in, limited customization, up-front costs and scalability.

Embracing Open-Source and Community

My gravitation towards Supabase is also influenced by its open-source ethos which promotes transparency, collaboration, and community-driven innovation.

Being open to open source is more than just being idealistic, it’s also pragmatic.

The Supabase project is open source e.g. the code that runs its managed service can be downloaded and used on a server of your choosing.

If Supabase decides to increase the managed service cost to a level where it no longer makes sense to use it, you can manage the services yourself elsewhere.

Supabase has been completely transparent about its open-core business model from the start, hopefully, this model continues to work for them.

However, relying on open-source projects is not without potential pitfalls, especially when open-source companies’ heads get turned by greedy VCs and start over profiteering.

At one time, Elastic was my tool of choice for multi-faceted search, but the change in licence by the company has left a bad taste.

However, even though open-source licences can change, it is still better than the closed-source alternative where you are completely at the vendor’s whims from day one.

Simplifying the Complex

Creating apps is a complicated process even without having to worry about managing servers.

Delegating responsibility for managing auth, database, and storage to a managed service allows small teams to concentrate on more impactful concerns.

Not only does Supabase take these concerns away from you but it does it all in an easy-to-use dashboard.

The developer experience in general has been, dare I say it, enjoyable.

Using the Supabase tools and libraries has successfully reduced the complexity and lines of code in my apps.

The Security Model: Easy to Understand

The simplicity of the row-level security model in PostgreSQL is easy to configure and understand.

It presents a straightforward yet robust framework that drastically reduces the risk of misconfiguration—making security accessible to all of the team, even for newcomers, from day one.

However, it’s not perfect.

I have had experience in the past with different approaches to securing data. My least favourite way in the past was to implement the security rules totally in code i.e. lots of if/then statements hidden away in code that only the core developing team could understand or change.

In contrast, in my opinion, the “best” way I have experienced is to use declarative authorization rules, defined in the data schema e.g. Amplify authorization rules.

In the example below, any user can read from the “Todo” table/graphql type, but only the person who created the row can update or delete their own data.

## Configure schema and auth rules
## in one place 
type Todo 
  @model 
  @auth(rules: [{ allow: public, operations: [read] }, { allow: owner }]) 
  { 
     content: String 
  }
## Implementing something similar
## using Postgres/supabase
create policy "Allow select, update and delete for users based on id" on "public"."Todo" as permissive for all to public using ((auth.uid() = id));
 
create policy "Read for all users" on "public"."Todo" as permissive for select to public using (true);

It would be great if Supabase could cater for the type of declarative security as above, if anyone knows if it can, please reach out.

Scalability and Performance: Meeting Tomorrow’s Needs Today

Premature optimization is the root of all evil, let someone else grapple with the demon

In the past, I have spent countless hours trying to eek out marginal gains in performance in case my app goes viral. Spoiler alert… it didn’t… and I’ll never get those hours back.

Let someone else (with probably more expertise) obsess about performance and scalability.

Supabase’s seamless scalability ensures that as you grow, your backend does too—smoothly and reliably. This peace of mind allows you to focus your energies on innovation and enhancing user experience, secure in the knowledge that your technological foundation is a given.

The Cost-Effectiveness of Dreaming Big

Free and Pro pricing (March 2024)

In the world of startups, where every resource counts, Supabase’s pricing model is perfect.

The free tier is generous enough to battle-test your idea. The follow-on tiers are predictable and fair.

It’s not just about infrastructure costs where Supabase shines. The comprehensive savings in developer hours it enables through its exceptional developer experience is significant.

Again, this efficiency allows you to channel resources into areas that directly amplify user value and platform growth.

A Comparison with the Giants

In my career, I have used other back-end-as-a-service offerings and Supabase compares favourably for the projects I’ve been doing lately i.e. small team startup.

I have used all of the following comparable technologies in production environments: Firebase, Retool, AWS Amplify, Budibase.

I have tried, but not implemented the following tools: Planetscale

I have not tried, but want to look at, the following: Parse, NHost, Backendless, AppWrite

My advice, if any is needed, is to look at your particular situation and try out any or all of the tools above on a pet project.

The “try out” part is key, all these sites have wonderful marketing websites which promise the earth. It’s not until you get down into the weeds on developer experience and pricing that the suitability becomes clearer.

*this post is the 2nd of a 4 part series of posts exploring Supabase, Vercel & Svelte. This post goes deeper into Supabase

Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

The Power Trio: Svelte, Supabase, & Vercel – My [current] Tech Stack of Choice

Standard

*this post is the 1st of a 4 part series of posts. This post gives a quick overview of Svelte, Vercel & Supabase, the following posts will go deeper into the technologies.

Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

Choosing the right stack for your project is akin to setting the foundations of a building. It needs to be solid, reliable, and scalable.

As a software engineer for over 26 years, I’ve finally found a stack that feels like home: Svelte, Supabase, and Vercel.

This trio has not only supercharged my own productivity but has also proven indispensable in my role as CTO of a small startup. When every decision weighs heavily on our budget and future, finding a stack that offers ease of use, scalability, reliability & cost-effectiveness, has been thoroughly reassuring.

Supabase, Svelte & Vercel

Why SvelteKit, Supabase, & Vercel?

Each component of this stack brings something unique to the table.

Svelte, with its simplicity and speed, allows us to build web applications that are incredibly fast and easy to maintain. It eliminates the complexity typically associated with front-end development. It makes the developer experience delightfully smooth. This has been a game-changer for us. In a startup environment resources are limited, and we need to move quickly without sacrificing quality.

Then there’s Supabase, an open-source Firebase alternative, which has been a revelation. It offers the backend services we need – authentication, database, and storage – without the overhead of managing these systems ourselves. Its PostgreSQL foundation means we’re building on top of a powerful, open-source database. Not only that, its easy-to-use APIs save us countless hours that would otherwise be spent on backend development.

Vercel provides a seamless deployment and hosting solution that integrates perfectly with SvelteKit and GitHub. Its global CDN ensures our applications are fast, no matter where our users are. Its commitment to developer experience makes deploying our applications as simple as a git push. In the fast-paced environment of a startup, Vercel’s scalability and ease of use are invaluable.

Productivity Gains

The synergy between Svelte, Supabase, and Vercel has significantly boosted our productivity. The reduction in context switching, the streamlined development process, and the ease of deployment means we can go from idea to production incredibly fast. In a small startup, where each member often wears multiple hats, being able to focus more on solving our users’ problems and less on the intricacies of our tech stack is a massive advantage.

Scalability for Startups

For any early-stage startup, the ability to scale efficiently is critical. This stack ensures that we’re not just building for the present but are also prepared for future growth. Supabase and Vercel, in particular, offer scalable solutions that grow with us. Both ensure that we can handle increased loads without a hitch (and without surprise bills). This peace of mind allows us to focus on innovation and delivering value to our users, rather than worrying about our infrastructure.

A Personal Reflection

My personal journey through the realms of large corporations and startup agencies has taught me the importance of choosing the right tools. In the past, I’ve dealt with the complexities of custom builds and the challenges of managing primitive services on platforms like AWS, Azure & GCP. While powerful, they often require a significant investment in time and resources to manage effectively.

In my current role, where the margin for error is slim, and our budgets are tight, the simplicity, efficiency, and scalability of the Svelte, Supabase, and Vercel stack have been a blessing. It’s a setup that supports rapid growth and innovation, aligning perfectly with the transparent, agile, forward-thinking ethos of our startup.

My 26 years of experience across different spectrums of the tech industry has solidified my belief that software development is hard, the tech stack should make it easier, and abstracting the difficult parts away to scalable services should always be considered.

With this particular tech stack, I have personally found a great balance between interoperability, scalability and extensibility. A word of caution though, what works for one team does not necessarily mean its right for others. However, for our situation, it’s been a testament to how the right set of tools can not only enhance productivity but also empower a team to focus on what truly matters – creating value for the users.

*this post is the 1st of a 4 part series of posts. This post gives a quick overview of Svelte, Vercel & Supabase, the following posts will go deeper into the technologies.

Part 1: Intro
Part 2: Supabase
Part 3: Vercel
Part 4: Svelte

Clean Code Tools

Standard

Writing code is an inexact science, imperfections in your code are inevitable and add up.

Having a tool that constantly nags you to strive for perfect code is a must have for flawed [see human] developers.

 

Compiled Code

Where code analysis tools really excel is with compiled code.

With compiled code, the clean code tools not only analyse the quality of your code but also automatically fix and style it!. With compiled code you get piece of mind when these ‘automatic’ changes are made because the compiler is there to reassure you.

Thank God for Resharper!

I use these type of productivity tools religiously; in particular, for any C# or JS code that I write, I always use/need Resharper from JetBrains.

resharper_stylecop clean code

Some people might say that it is ‘lazy’, letting a productivity tool ‘automagically’ do what you should be doing out of hard learned habit. I agree, it is lazy, and I am often sloppy with my code knowing that my ‘magic helper’ will clean up after me. But, I have found that, after a while, I start incorporating the suggestions and changes that the tools give me into my ‘unclean’ code, so that the tools have less work to do and my code becomes cleaner ‘naturally’.

 

resharper uninstall clean code

Too much of a good thing?

However, you can go too far with these tools.

Not only do you start to rely heavily on these types of tool to do a lot of the basic coding for you but also some of the suggestions it make for code changes can lead to your code becoming less ‘human readable’. It is soooo tempting to accept the suggestions to lambdify or linq entire sections of your code just because Reharper tell you to do it and it compresses your code to a single line. I thoroughly recommend watching the clean code Pluralsight course or reading Robert Martin’s (uncle Bob) book on clean code, to understand why human readable code is so important.

resharper - clean code

 

Interpreted Code

Things get more trickier with interpreted code e.g. Javascript. With interpreted code you do not have the compiler to reassure you that any ‘automagic’ changes are ‘safe’. For this reason, most clean code tools for interpreted code will give advice, rather than make changes for you. However, the ‘linting’ tools for interpreted code (JS in particular) have come a long way and are an essential part of any coder’s utility belt. For instance, when writing Javascript code I now rely [heavily] on Douglas Crockford’s JSLint to tell me that have been a naughty boy (I would highly recommend all Javascript developers to read Douglas’s book: Javascript The good parts and watch his talk on pluralsight) about Javascript.

jslint - clean code

What lint/analysis/style/refactoring tools do you use everyday and cannot live without? Leave a comment below:

 

Podcasts

Standard

So little time, so much to learn

Gone are the days for the software developer where you can learn one technology inside out, sit back and work at the same job for 20 years. Continuous learning, the ongoing voluntary pursuit of knowledge, is becoming an essential pursuit to most working in the software industry.

The technological landscape is evolving so fast that most of us programmers have to continually learn, or risk having an increasingly extinct set of skills.

learn

There are a number of tools that I have started to use which have helped me better keep apace with some of the changing I.T. industry landscape.

Technical Podcasts – Learn On The Go

If, like me, you have a relatively long commute into work [30 minutes or more], there are many excellent ways that you can utilize this time. Some like to read newspapers, listen to music, enjoy a good novel; I like to use this time to ‘sharpen my axe‘ by catching up on the latest goings on in the software development world through listening to technical podcasts.

Using this time to listen to podcasts has been highly beneficial to me in a number of ways:

  • Learn the lingo. Once you start listening to podcasts you are much more aware and confident with many of the phrases and terms used within the industry. Terms like ‘big iron’, ‘cranking code’, ‘heisenbug’, ‘pokemon handling’, ‘stringly typed’ etc are all now part of a colorful vocabulary thanks to listening to others using them confidently on podcasts.

heisenbug

  • Bleeding Edge. Most of the podcasts pick up on new technologies or practices. If someone uses a brand new technical term in the office that starts you sweating that they will ask you your opinion on something that you cannot even spell… you can be sure there is a podcast for that.
  • Different Viewpoints. Going outside your comfort zone, like listening to web podcasts when you have spent your life as a desktop developer, will open your horizons to similar, but different ways, to approach your own field (you never know, you might pick up a new golden hammer).
  • General Consensus. As well as picking up new terms and technologies it also helps to reinforce current terms or technologies that you are already using.

 

Lots of Great Podcasts

Here are some recommended podcasts that I am currently listening to:

  • .NET Rocks : My favorite podcast for technical content. Excellent audio quality, content and banter. Not as Microsoft centric as you might think.
  • Hanselminutes : Again good content and quality but sometimes steers away from tech relevant subjects.
  • Herding Code. Great web podcast. Sometimes a bit Microsoft centric.
  • Javascript Jabber. Good for web/javascript technology talk. Sometimes a bit tangential but very enjoyable.
  • Stuff You Should Know : My favorite non-technical podcast. Good for some respite from too much tech talk. Josh and Chuck are very funny and present some dry topics in an entertaining way. Some great and varied subjects like ‘How Pinball works‘ to ‘How the scientific method works’.

 

What other resources have you come across?

Have you had any experience with any of the resources I have mentioned, what did you think?

 

Angular – My New Golden Hammer

Standard

Web Development feels ‘hacky’

For most of my career I have been a desktop developer but a few years ago I started making the move towards web development.

The move, at first, was horribly painful. For most of my working life I was working with the safety of compilers, full featured code libraries, mature test frameworks, UI frameworks and data-binding only to be thrown into the then (and even now) ‘wild west’ of web development.

My biggest gripe with web development was “how can it be so hard to do such simple things?”. I was finding that putting a button and some input controls on a screen that saved to a database required me to write waaaayyyy too much code. Never mind all the problems with screen size and browser compatibility, even simple things felt verbose and ‘hacky’

. silverlight_logo_large_verge_medium_landscape-300x169

Silverlight – Desktop like, but flawed

I quickly retreated back from pure Javascript/HTML/CSS development to using something more ‘desktop-like’ and started using, and advocating, Silverlight.

Silverlight is [was] Microsoft’s attempt to replace Flash (more or less). Things were good, I was productive again and spitting out highly functional web apps until I started fully realizing the limitations of using a plugin based approach. On the brink of giving up web development due to frustration, I started looking at the latest web technologies that were beginning to gain some traction.

Knockout JS. Better, but still too many dragons to slay…

knockout

The first bit of relief came when I discovered Knockout.js. Knockout is a fantastic library that enables easy MVVM data-binding in your web apps. This was more like it, not having to write as much ‘grunt’ code to hook up data with UI felt much better. Something as simple as the data-binding that knockout gave me renewed my enthusiasm for web development and I started to look for other libraries that could address the other reservations that I had about web development.

AngularJS-large

Angular, now we’re talking

The next discovery, and most fruitful, was AngularJS.

Angular is a Javascript library from Google which makes web development sooooo much easier. For almost every problem that I started to ask Angular it seemed that the developers had already had the same pain and had already built the functionality into Angular already. If there was something that I needed from the framework that didn’t already exist, there was usually an Angular extension that was readily available or I was able to make a directive from an existing Jquery plugin.

Angular has become so much of a golden hammer for me that I find it hard to contemplate starting a large website without using it.

Looking to the future

The landscape for web development is evolving rapidly but with frameworks like Angular, and maturing and adherence to web standards, it does not seem as anarchic as it once was. There are several other libraries that have made my life easier such as underscore/lodash, twitter bootstrap, and breezejs, but the underlying library that has made the most difference is Angular. Since converting to Angular I am now a happy and more productive web developer. Before, I was extremely frustrated and unproductive and although Angular, and web development in general, is still far from perfect, it is a more enjoyable place to be.

A Word of Caution for Angular 2

Before you get carried away and start seeing everything in angular tinted glasses, you need to consider the ramifications of the upcoming Angular 2.0.

I have had a look at the 2.0 syntax and it is a big departure from 1.x. IMHO this is a strange and worrying decision from Google as many people looking to dive into Angular at this point in time will be uneasy that the code they write now will not be supported/current in the near future.

2 Golden Hammers?

Although promises of a clear upgrade path are promised by Google, it might be time to find a backup golden hammer (i.e. React) to hedge my bets.

Has anyone else got similar experiences with Angular? Have you found other libraries that you feel you cannot do without? How do you see the future for frameworks like Angular, React, Backbone or Ember?