ANGULAR 2.0 READY? STACK UP YOUR STACK...

Transcription

1 version 2.4 age 1

2 ... o t t n a w u o y o 1 S M S C i evelopers, e are Software rchitects at SS and part time SS ev Super ower eroes. e often help developers who are struggling to architect enterprise ngular applications and we enable them to get up to speed with the best practices to enable them to take control of their ngular projects. Knowing how to avoid the time wasting and common errors in ngular architecture, along with leveraging the best tools, can save you weeks of set up time and months of headaches trying to re-architect your apps. o you agree with these five lessons? et us know! 2 C I C F V?, SCI? I S B C IS 3 G 2.0? SCK SCK... 4 I M V K FS C IS IB G I 5. IM G I S CSS. M V C age 2

3 1 V F CIC,? he pain ngular developers tell me the #1 cause of pain is their architecture: they always wish they had gotten it right first time. hat is architecture? he stuff that is hard to change. ngular has several ways to do everything, which can be a problem if everyone on the team does things in a different way. ngular has matured over the last few years and now when you look up the latest best practices, they re often intermingled with outdated practices. It s not always easy to know which to use. he practice ou should follow a style guide. By far the most popular style guide is John apa s style guide at Gitub. ith over 15,000 likes, it is more popular than some frameworks! Style guides help keep consistency across the duration of the project by ensuring all the developers are using the same architecture and best practices. sing a style guide also opens conversation early in the project, which helps the team to think ahead, and avoid any potential limiting of their applications design structure. he promise aving your whole team using the same ngular practices can save you from ending up in a pile of spaghetti code. age 3

4 2 IS C BS I SCI? he pain he practice he promise hen your application hits over 100,000 lines of JavaScript, or you have a large team all contributing to the code base, the prospect of application refactoring can become scary, as even just renaming a single variable could silently break your application. nit tests are great, but strong typing is even better as it adds an extra layer of protection for your code. ypescript, a typed super set of JavaScript, brings type checking to your JavaScript code. It allows you to safely refactor your code and be notified of issues by your I (instead of when your users report a bug), so you can confidently refactor large code bases. sing ypescript will make your application more maintainable, scalable and a pleasure to refactor as it grows. ypescript does more than just type checking - you get amazing tooling with IntelliSense, right click rename by symbol, and go to definition. ypescript also ships JavaScript features ahead of the official JavaScript anguage releases, meaning you will not have to wait for the browser or the JavaScript committee to release updates, in order to use the latest and greatest. age 4

5 3 G 2.0? SCK SCK... he pain ou finally finish building an awesome next generation nterprise application in ngular 1.x hen they release ngular2.0. our code is so different to ngular 2.0 that migrating is not an option and you are forced to either stay with ngular 1.x or do a massive rewrite. uch. he practice: hese 5 practices will make migrating to ngular 2.0 from ngular 1.x more feasible: 1. se ypescript classes for your directives, services, and controller in ngular 1.x so your client-side business logic can be cut and pasted into ngular 2.0 JavaScript or ypescript classes. ngular 2.0 is being written in ypescript, so you will be better equipped to start with ngular 2.0 if you already know ypescript. 2. tilise directives as much as possible. ngular 2.0 will be component based, so making your current application with as many ngular directives as possible will help you migrate your application to ngular se the ew ngular outer when it is released with ngular 1.5. he new ngular router will be the same router used in ngular 2.0, so if you use it in your ngular 1.x apps, this is one less change to make later. 4. rganise your folders by feature. his means that you will have both your view and your controller in the same folder. his is how the new ngular router will expect to find your M views and controllers. 5. Start using a frontend build process with a task runner like GulpJS. ur frontends are getting more advanced, and these days having a frontend build process is a must to have a scalable website that s ready for production. he promise ou will have a easier time migrating your applications from ngular 1.x to ngular 2.0 age 5

6 4 FS CK VM I I G IBIS he ain earning to use ngular can already slow down your development time, but trying to roll all your own custom ngular directives yourself, can be a huge time sink and you might end up with lacklustre features. he ractice se the following third party libraries to fast track your development and avoid rewriting the web: Kendo I: For charts, date pickers, and grids in particular, Kendo has a full suite of I ngular directives. ngular I Bootstrap: For using the Bootstrap I framework. popular alternative is ngularstrap. odash: a JavaScript utility library delivering consistency, modularity, performance, and extras. 3 Charts: hen you need to go beyond a pie or bar chart, 3 charts are only limited to what you can imagine. he promise tilise these third party libraries to speed up your development time. age 6

7 5. IM G I S CSS. M V C he pain he practice o you perform all of your bundling and minification by hand? If you do not have a frontend build process with ngular 1.x, you are missing out on some huge productivity gains and more maintainable code. o you manually convert your SSS to CSS? o you blindly re-process your files each time you make a change? lthough required to get your web application ready for production, the time lost preforming these, and a range of other small, dull, and down right repetitive tasks can never be reclaimed. reviously in order to set up this frontend build process, we would have to take the time to configure tools that existed outside of the. space to get them to play nicely with Visual Studio. nter Visual Studio 2015 with the ode ackage Manager (M) in-built, ready to make creating your frontend build process simple. M acts as the foundation for your new process as it is a simple yet powerful tool with one purpose: o make downloading JavaScript libraries effortless. orking in tandem with M and Visual Studio 2015 are task runners, such as Gulp and Grunt, the heavy lifters of your new frontend build process. ask runners add automation to your process by performing a range of simple yet tedious tasks on a predefined trigger. he promise ven if you ve only just started creating web applications, you can streamline your web application development process with Visual Studio 2015, M, and task runners. ou ll spend less time on menial tasks and more time creating amazing web applications. age 7

8 ! S S G C M SS iked this ebook? e ve got another 2 days of value Because ngular is such a monolithic framework, choosing just 5 lessons to include in this checklist was hard. I ve tried to keep it balanced to illustrate that it has something for every sort of developer, regardless of niche or skill level. If you want to learn more about ngular 2.0, and why it s the ultimate development tool for tomorrow and today, I ve got another 2 days of value I d love to share with you. In this 2 day workshop, I have the time and space to take a deeper dive, and illustrate my talking points with screen caps, code snippets, and good and bad examples. he ngular Superpowers our: ngular 2 and S. MVC 6 in Visual Studio 2015 his 2 day workshop brings developers up-to-speed on the new features and benefits of using S. 5 and ngular 2 in Visual Studio 2015 to build awesome web applications. verything has changed! ngular 2 and MVC 6 both involve massive changes to how we build modern web applications, while Visual Studio 2015 has incorporated all the best tooling from the JavaScript community to enable awesome frontend dev-ops. t SS we have already gone through the hard work on implementing these new and exciting technologies in our projects. the S. team. Visual Studio 2015 is massively different but we can get you jump started in just two days. Join us for a fun 2 day training course. GIS! on t waste weeks learning gulp, bower, M, eback, ngular 2, and getting your head around all the changes from age 8