Decision about HTML5, Ruby, Babel, Webpack, Visual Studio Code, GraphQL, Graphcool Framework, Figma, TypeScript, JavaScript, Framework7, Css

Avatar of jdspugh
Software Engineer / Project Manager / Technical Architect

I needed to choose a full stack of tools for cross platform mobile application design & development. After much research, trying different tools, and 18 years of mobile design & development, these are what I came up with that work for me today:

For the client coding I chose Framework7 because of its performance, easy learning curve and very well designed, beautiful UI widgets. I think it's perfect for solo development or small teams. I didn't like React Native. It felt heavy to me and rigid. Framework7 allows the use of #CSS, which I think is the best technology to come out of the #WWW movement. No other tech has been able to allow designers and developers to develop such flexible, high performance, customisable user interface elements that are highly responsive and hardware accelerated before. React Native contains a very limited interpretation of #CSS which I found very frustrating after using #CSS for some years already and knowing its powerful features. The other very nice feature of Framework7 is that you can even build for the browser if you want your app to be available for desktop web browsers. This is not possible with React Native yet.

JavaScript is very far from an ideal language, to say the least. To make life bearable I managed to configure TypeScript to work with the latest version of Framework7. This makes me feel like I'm back in the good old Java days. I consider TypeScript to be one of the rare best creations to come out of Microsoft in some time. They must have an amazing team working on it. It's very powerful and flexible.

For the user interface design and prototyping I use Figma. Figma has an almost identical user interface to Sketch but has the added advantage of being cross platform (MacOS and Windows). Its real-time collaboration features are outstanding and I use them a often as I work mostly on remote projects. Clients can collaborate in real-time and see changes I make as I make them. The clickable prototyping features in Figma are also very well designed and mean I can send clickable prototypes to clients to try user interface updates as they are made and get immediate feedback.

For the UI icons I use Font Awesome Pro. They have the largest selection and best looking icons you can find on the internet.

For the backend I chose Graphcool Framework. It has great customer support and a very accessible free startup plan for working on new projects. I was never a fan of relational databases so I'm very pleased to see NoSQL / GraphQL databases coming to the fore and I'm happy to use them. No more server side API development required! NoSQL databases are so much more flexible and the way I think databases were meant to be from the start.

For the IDE I use Visual Studio Code which is blazingly fast and silky smooth for editing code with the ultimate TypeScript checking (since both products are written by Microsoft).

I use Webpack and Babel to compile the JavaScript. TypeScript can compile to JavaScript directly but Babel offers a few more options and polyfills so you can use the latest JavaScript features today and compile to be backwards compatible with virtually any browser.

I use some Ruby scripts to process images with ImageMagick and pngquant to optimise for size and even auto insert responsive image code into the HTML5. Ruby is the ultimate cross platform scripting language. Even as your scripts become large, Ruby allows you to refactor your code easily and make it Object Oriented if necessary. I find it the quickest and easiest way to maintain certain aspects of my build process.

What tools do you use? Have you tried these ones?

15 upvotes7 comments17.7K views
jasper4685
jasper4685
December 9th 2018 at 2:28am

Great post Jonathan.

My main TypeScript IDE is WebStorm. Its heavier on battery life, so maybe not a good idea for out-and-about coding, but I love Jetbrains IDEs for their refactoring tools, test runner, keyboard centric navigation and index searches and so forth. Their all products pack is handy for me when swapping between languages - same keyboard shortcuts, look&feel, etc.

For backend services I like using Node.js, with TypeScript and Neo4j for either RESTful or GraphQL interfaces. I've been promising to publish some details about this setup soon.

Reply
Jonathan Pugh
Jonathan Pugh
December 9th 2018 at 4:51am

Thanks Jasper. Yeah I see the benefit of Jetbrains for multiple languages. I've used it before. For now I just love how smooth and light Visual Studio Code is since I'm only focusing on Typescript.

When I have some spare time I'm going to try Neo4j GraphQL. Can it be configured for lower end servers also? The minimum requirements are high for what I have at the moment.

Reply
franz-see
franz-see
December 9th 2018 at 2:36pm

I used to do node with Webstorm as well. Even had the paid one. But i鈥檝e now switched to Visual Studio Code and I鈥檇 say it鈥檚 the best JS IDE out there. Way faster than WebStorm and it鈥檚 terminal is legit unlike that of Jetbrains. I highly recommend trying out VS Code. (For Java though, nothing beats IntelliJ)

Reply
franz-see
franz-see
December 9th 2018 at 2:38pm

Javascript ES6 is not so bad. It鈥檚 actually pretty great. Used to do things in TypeScript as well till I鈥檝e learn to embrace ES6.

Also, for my ultimate scripting language, mine is Python. Just because it comes out of the box of OSX and most linux flavors.

Reply
Jonathan Pugh
Jonathan Pugh
December 9th 2018 at 5:28pm

Hi Franz. Nice to hear your experience. For smaller projects I may go freestyle with just Javascript but I feel the type checking Typescript provides does catch more bugs. I haven't used Python for anything yet. Have you tried Ruby?

Reply
Avatar of Jonathan Pugh

Jonathan Pugh

Software Engineer / Project Manager / Technical Architect